ilios · jrjohnson · Aug 15, 2024
@@ -72,6 +72,9 @@ export default class CurriculumInventoryNewSequenceBlock extends Component {
       { id: '2', title: this.intl.t('general.optionalElective') },
       { id: '3', title: this.intl.t('general.requiredInTrack') },
     ];
+
+    this.startDate = new Date();
+    this.endDate = new Date();
   }
 
   get linkedCourseIsClerkship() {

@@ -55,6 +55,7 @@
                 <DatePicker
                   @value={{this.startDate}}
                   @onChange={{queue (set this.startDate) (fn this.addErrorDisplayFor "startDate")}}
+                  @openOnLoad={{true}}
                   data-test-start-date-picker
                 />
                 <ValidationError @errors={{get-errors-for this.startDate}} />
@@ -78,6 +79,7 @@
                 <DatePicker
                   @value={{this.endDate}}
                   @onChange={{queue (set this.endDate) (fn this.addErrorDisplayFor "endDate")}}
+                  @openOnLoad={{true}}
                   data-test-end-date-picker
                 />
                 <ValidationError @errors={{get-errors-for this.endDate}} />

@@ -2,8 +2,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb439ee6b510cea24e2
 add|ember-template-lint|no-at-ember-render-modifiers|25|6|25|6|242be4337ef58ba487a9168fe2944bd6919a1397|1722902400000|1730682000000|1754006400000|addon/components/choose-material-type.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|26|6|26|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1722902400000|1730682000000|1754006400000|addon/components/choose-material-type.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|7|2|7|2|83ed72f478af76221bd23683c194bca4058827a2|1722902400000|1730682000000|1754006400000|addon/components/daily-calendar-event.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb8a149d14413d4dfc84ffd31349ef3f2ac6d17b|1722902400000|1730682000000|1754006400000|addon/components/date-picker.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|993f1e23f796f19a221eae6e24872755e0436cb4|1722902400000|1730682000000|1754006400000|addon/components/date-picker.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|5ba74b4fd722ca99a9891d9368168c13b9f87f4c|1722902400000|1730682000000|1754006400000|addon/components/detail-cohort-list.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|ade7a389613179cd6e09a3b5b2c01b0fe8f5b436|1722902400000|1730682000000|1754006400000|addon/components/detail-cohort-list.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1722902400000|1730682000000|1754006400000|addon/components/detail-competencies.hbs

@@ -125,6 +125,7 @@
               <DatePicker
                 @value={{this.startDate}}
                 @onChange={{pipe (set this.startDate) (fn this.addErrorDisplayFor "startDate")}}
+                @openOnLoad={{true}}
               />
             </EditableField>
             <ValidationError @errors={{get-errors-for this.startDate}} />
@@ -145,6 +146,7 @@
               <DatePicker
                 @value={{this.endDate}}
                 @onChange={{pipe (set this.endDate) (fn this.addErrorDisplayFor "endDate")}}
+                @openOnLoad={{true}}
               />
             </EditableField>
             <ValidationError @errors={{get-errors-for this.endDate}} />

@@ -1,8 +1,15 @@
-<input
-  aria-label={{t "general.pickADate"}}
-  class="date-picker"
+<EmberFlatpickr
   data-test-date-picker
-  {{did-insert (perform this.setupPicker)}}
-  {{did-update (perform this.updatePicker) @value @maxDate @minDate}}
+  aria-label={{t "general.pickADate"}}
+  placeholder={{t "general.pickADate"}}
+  @date={{@value}}
+  @disableMobile={{this.isTesting}}
+  @enableTime={{false}}
+  @locale={{this.locale}}
+  @maxDate={{this.maxDate}}
+  @minDate={{this.minDate}}
+  @onChange={{this.onChange}}
+  @onReady={{this.onReady}}
+  @formatDate={{this.formatDate}}
   ...attributes
 />
@@ -1,72 +1,56 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { dropTask, restartableTask, waitForProperty } from 'ember-concurrency';
-import { tracked } from '@glimmer/tracking';
-import flatpickr from 'flatpickr';
-import { later, next } from '@ember/runloop';
 import { isTesting } from '@embroider/macros';
+import { action } from '@ember/object';
+import { TrackedAsyncData } from 'ember-async-data';
 
 export default class DatePickerComponent extends Component {
   @service intl;
 
-  @tracked _flatPickerInstance;
-  @tracked isOpen = false;
+  isTesting = isTesting();
 
-  updatePicker = restartableTask(async (element, [value]) => {
-    await waitForProperty(this, '_flatPickerInstance');
-    if (this._flatPickerInstance.selectedDates[0] != value) {
-      this._flatPickerInstance.setDate(value);
+  get localeData() {
+    const locale = this.intl.primaryLocale;
+    let p = 'en';
+    if (locale === 'fr') {
+      p = import('flatpickr/dist/l10n/fr.js');
     }
-  });
+    if (locale === 'es') {
+      p = import('flatpickr/dist/l10n/es.js');
+    }
+
+    return new TrackedAsyncData(p);
+  }
 
-  setupPicker = dropTask(async (element) => {
-    const currentLocale = this.intl.primaryLocale;
-    let locale;
-    switch (currentLocale) {
-      case 'fr':
-        // eslint-disable-next-line no-case-declarations
-        const { French } = await import('flatpickr/dist/l10n/fr.js');
-        locale = French;
-        break;
-      case 'es':
-        // eslint-disable-next-line no-case-declarations
-        const { Spanish } = await import('flatpickr/dist/l10n/es.js');
-        locale = Spanish;
-        break;
-      default:
-        locale = 'en';
+  get locale() {
+    if (this.localeData.isResolved) {
+      return this.localeData.value;
     }
-    this._flatPickerInstance = flatpickr(element, {
-      locale,
-      defaultDate: this.args.value,
-      formatDate: (dateObj) =>
-        this.intl.formatDate(dateObj, { day: '2-digit', month: '2-digit', year: 'numeric' }),
-      onChange: (selectedDates) => this.onChange(selectedDates[0]),
-      onOpen: () => {
-        // eslint-disable-next-line ember/no-runloop
-        later(() => {
-          this.isOpen = true;
-        }, 250);
-      },
-      onClose: () => {
-        this.isOpen = false;
-      },
-      maxDate: this.args.maxDate ?? null,
-      minDate: this.args.minDate ?? null,
-      disableMobile: isTesting(),
-    });
-  });
 
-  willDestroy() {
-    super.willDestroy(...arguments);
-    if (this._flatPickerInstance) {
-      this._flatPickerInstance.destroy();
+    return 'en';
+  }
+
+  get maxDate() {
+    return this.args.maxDate ?? null;
+  }
+
+  get minDate() {
+    return this.args.minDate ?? null;
+  }
+
+  @action
+  onReady(_selectedDates, _dateStr, flatpickrRef) {
+    if (this.args.openOnLoad) {
+      flatpickrRef.open();
     }
   }
 
-  async onChange(date) {
-    await this.args.onChange(date);
-    // eslint-disable-next-line ember/no-runloop
-    await next(() => {});
+  @action
+  onChange(dates) {
+    this.args.onChange(dates[0]);
+  }
+
+  @action formatDate(date) {
+    return this.intl.formatDate(date, { day: '2-digit', month: '2-digit', year: 'numeric' });
   }
 }
@@ -15,6 +15,7 @@
           <DatePicker
             @value={{this.dueDate}}
             @onChange={{this.updateDate}}
+            @openOnLoad={{true}}
           />
           <TimePicker @date={{this.dueDate}} @action={{this.updateTime}} />
           <ValidationError @errors={{get-errors-for this.dueDate}} />

@@ -45,6 +45,7 @@
     "ember-event-helpers": "^0.1.0",
     "ember-feature-flags": "^6.0.0",
     "ember-file-upload": "^9.0.0",
+    "ember-flatpickr": "^8.0.1",
     "ember-focus-trap": "^1.0.0",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-in-viewport": "^4.0.0",