allow to set id for date picker input element

changhuixu · Mar 25, 2022 · 68b7fca · 68b7fca
1 parent e68e602
commit 68b7fca
Show file tree

Hide file tree

Showing 12 changed files with 1,039 additions and 669 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,25 +14,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.2.3",
-    "@angular/common": "~13.2.3",
-    "@angular/compiler": "~13.2.3",
-    "@angular/core": "~13.2.3",
-    "@angular/forms": "~13.2.3",
-    "@angular/localize": "~13.2.3",
-    "@angular/platform-browser": "~13.2.3",
-    "@angular/platform-browser-dynamic": "~13.2.3",
-    "@angular/router": "~13.2.3",
-    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
+    "@angular/animations": "~13.3.0",
+    "@angular/common": "~13.3.0",
+    "@angular/compiler": "~13.3.0",
+    "@angular/core": "~13.3.0",
+    "@angular/forms": "~13.3.0",
+    "@angular/localize": "~13.3.0",
+    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/router": "~13.3.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.0.1",
     "bootstrap": "^5.1.3",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.4",
-    "@angular/cli": "~13.2.4",
-    "@angular/compiler-cli": "~13.2.3",
+    "@angular-devkit/build-angular": "~13.3.0",
+    "@angular/cli": "~13.3.0",
+    "@angular/compiler-cli": "~13.3.0",
     "@types/node": "^12.11.1",
     "cypress": "^9.5.0",
     "ng-packagr": "^13.2.1",

diff --git a/projects/uiowa/date-range-picker/package.json b/projects/uiowa/date-range-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/date-range-picker",
-  "version": "7.1.0",
+  "version": "7.2.2",
   "author": "Changhui Xu <[email protected]>",
   "contributors": [
     "Jacob Feuerbach <[email protected]>"
@@ -20,7 +20,6 @@
   "peerDependencies": {
     "@angular/common": ">=13.0.0",
     "@angular/core": ">=13.0.0",
-    "@angular/localize": ">=13.0.0",
     "@ng-bootstrap/ng-bootstrap": ">=12.0.0"
   },
   "dependencies": {

diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.css b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.css
@@ -20,3 +20,6 @@ svg {
   width: 1rem;
   height: 1rem;
 }
+.form-control[readonly] {
+  background-color: #fdfdfd !important;
+}
diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html
@@ -4,33 +4,35 @@
     #d="ngbDatepicker"
     class="form-control"
     name="dp"
+    [attr.id]="id"
     [(ngModel)]="ngbDate"
     (click)="d.toggle()"
     [disabled]="disabled"
     [firstDayOfWeek]="7"
     [dayTemplate]="t"
     readonly
+    (keydown.enter)="d.toggle()"
     (dateSelect)="onDateChange($event)"
     style="max-width: 208px; cursor: pointer"
     title="click to select a date"
   />
   <button
-  class="btn btn-outline-secondary d-flex align-items-center"
-  (click)="d.toggle()"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    role="icon"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 448 512"
+    class="btn btn-outline-secondary d-flex align-items-center"
+    (click)="d.toggle()"
+    type="button"
   >
-    <path
-      fill="currentColor"
-      d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-    ></path>
-  </svg>
-</button>
+    <svg
+      aria-hidden="true"
+      role="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+      ></path>
+    </svg>
+  </button>
 </div>
 
 <ng-template #t let-date="date" let-currentMonth="currentMonth">

diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts
@@ -15,6 +15,7 @@ import { NgbDate, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';
   styleUrls: ['./date-picker.component.css'],
 })
 export class DatePickerComponent implements OnInit, OnChanges {
+  @Input() id = '';
   @Input()
   date: Date | null = null;
   @Input()
@@ -29,6 +30,9 @@ export class DatePickerComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.ngbDate = NgbDate.from(this.dateAdapter.fromModel(this.date));
+    if (!this.id) {
+      this.id = `date-picker-` + Math.random().toString(36).substring(4);
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {

diff --git a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.css b/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.css
@@ -36,3 +36,6 @@ svg {
   width: 1rem;
   height: 1rem;
 }
+.form-control[readonly] {
+  background-color: #fdfdfd !important;
+}
diff --git a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.html b/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.html
@@ -6,6 +6,7 @@
     class="form-control"
     style="max-width: 208px; cursor: pointer"
     readonly
+    [attr.id]="id"
     [disabled]="disabled"
     [autoClose]="false"
     [displayMonths]="2"
@@ -14,6 +15,7 @@
     [markDisabled]="isDisabled"
     [firstDayOfWeek]="7"
     (click)="dp.toggle()"
+    (keydown.enter)="dp.toggle()"
     (dateSelect)="onDateChange($event, dp)"
     title="click to select a date range"
   />

diff --git a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts
@@ -22,6 +22,7 @@ import { DateRange } from '../models/date-range';
   styleUrls: ['./date-range-picker.component.css'],
 })
 export class DateRangePickerComponent implements OnInit, OnChanges {
+  @Input() id = '';
   @Input()
   dateRange: DateRange = new DateRange();
   @Input()
@@ -46,6 +47,8 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
   constructor(private readonly dateAdapter: NgbDateNativeAdapter) {}
 
   ngOnInit() {
+    this.id =
+      this.id || `date-range-picker-` + Math.random().toString(36).substring(4);
     this.fromDate = NgbDate.from(
       this.dateAdapter.fromModel(this.dateRange.start)
     );

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -23,8 +23,11 @@
       <hr />
     </section>
     <section class="col-12 col-sm-6 col-lg-4 mb-4">
-      <strong>Longer Range</strong>
-      <date-range-picker [(dateRange)]="dateRange2"></date-range-picker>
+      <label for="date-range-picker3" class="fw-bold">Longer Range</label>
+      <date-range-picker
+        [id]="'date-range-picker3'"
+        [(dateRange)]="dateRange2"
+      ></date-range-picker>
       <pre>{{ dateRange2 | json }} </pre>
       <hr />
     </section>
@@ -68,8 +71,8 @@
       <hr />
     </section>
     <section id="date-picker" class="col-12 col-sm-6 col-lg-4 mb-4">
-      <strong>Date Picker Example</strong>
-      <date-picker [(date)]="date8"></date-picker>
+      <label for="date-picker8" class="fw-bold">Date Picker Example</label>
+      <date-picker [id]="'date-picker8'" [(date)]="date8"></date-picker>
       <pre id="date8">{{ date8 | json }}</pre>
     </section>
   </div>

diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>DateRangePickerDemo</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>DateRangePickerDemo</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
@@ -3,3 +3,7 @@ html body {
   margin: 0;
   overflow-x: hidden;
 }
+
+.fw-bold {
+  font-weight: bold;
+}