Merge pull request #593 from teamanvyl/fix/do-not-automatically-restrict-values-to-min-or-max-dates

fix: Prevent ember-pikaday from automatically updating values to within a min/max date bounds

Author: MelSumner

README.md

@@ -59,7 +59,6 @@ All other named arguments are passed directly to Pikaday, so see [Pikaday's conf
 
 The only behaviors this modifier adds to the stock Pikaday are:
 
-- if you set `minDate` or `maxDate` and that causes `value` to be outside the legal range, we adjust `value` and fire `onSelect` to inform you of the change
 - if you set your `<input>` element's `disabled` attribute we will close Pikaday if it had been open.
 
 ### &lt;PikadayInput&gt; Component

src/modifiers/pikaday.js

@@ -54,21 +54,9 @@ export default class PikadayModifier extends Modifier {
       this.#observer.observe(element, { attributes: true });
       register?.(this.#pikaday);
     } else {
-      let { value, minDate, maxDate } = named;
-      let valueAltered = false;
-      this.#pikaday.setMinDate(copyDate(minDate));
-      if (minDate && value && value < minDate) {
-        value = minDate;
-        valueAltered = true;
-      }
-
-      this.#pikaday.setMaxDate(copyDate(maxDate));
-      if (maxDate && value && value > maxDate) {
-        value = maxDate;
-        valueAltered = true;
-      }
+      let { value } = named;
 
-      this.#pikaday.setDate(value, !valueAltered);
+      this.#pikaday.setDate(value, true);
       this.#pikaday.config(pikadayOptions);
     }
   }
@@ -79,12 +67,3 @@ export default class PikadayModifier extends Modifier {
     }
   }
 }
-
-// apparently Pikaday mutates Dates that you pass it for minDate and maxDate. <sigh>
-function copyDate(date) {
-  if (date) {
-    return new Date(date.getTime());
-  } else {
-    return date;
-  }
-}

test-app/tests/integration/components/pikaday-input-test.js

@@ -253,7 +253,12 @@ module('Integration | Component | pikaday-input', function (hooks) {
     this.set('tomorrow', new Date(2010, 7, 9));
     await settled();
 
-    assert.dom('input').hasValue('09.08.2010');
+    assert
+      .dom('input')
+      .hasValue(
+        '10.08.2010',
+        'we do not manipulate the value even if it violates minDate'
+      );
   });
 
   test('set new date value with a new max date', async function (assert) {
@@ -267,7 +272,12 @@ module('Integration | Component | pikaday-input', function (hooks) {
     this.set('tomorrow', new Date(2010, 7, 11));
     await settled();
 
-    assert.dom('input').hasValue('11.08.2010');
+    assert
+      .dom('input')
+      .hasValue(
+        '10.08.2010',
+        'we do not manipulate the value, even if it violates the maxDate'
+      );
   });
 
   test('theme option adds theme as CSS class to DOM element', async function (assert) {
@@ -592,58 +602,6 @@ module('Integration | Component | pikaday-input', function (hooks) {
     assert.dom(disabledWeekendCell).doesNotHaveClass('is-disabled');
   });
 
-  test("if minDate is greater than value we set pikaday's current date to minDate", async function (assert) {
-    assert.expect(1);
-
-    const today = new Date();
-    const tomorrow = new Date(Date.now() + 60 * 60 * 24 * 1000);
-
-    this.set('currentDate', today);
-    this.set('minDate', today);
-    this.set('updateCurrentDate', (date) => {
-      this.set('currentDate', date);
-    });
-
-    await render(hbs`
-      <PikadayInput @minDate={{this.minDate}} @value={{this.currentDate}} @onSelection={{this.updateCurrentDate}}/>
-    `);
-
-    this.set('minDate', tomorrow);
-    await settled();
-
-    assert.equal(
-      this.currentDate.getDate(),
-      tomorrow.getDate(),
-      'value should change'
-    );
-  });
-
-  test("if maxDate is lower than value we set pikaday's current date to maxDate", async function (assert) {
-    assert.expect(1);
-
-    const today = new Date();
-    const tomorrow = new Date(Date.now() + 60 * 60 * 24 * 1000);
-
-    this.set('currentDate', tomorrow);
-    this.set('maxDate', tomorrow);
-    this.set('updateCurrentDate', (date) => {
-      this.set('currentDate', date);
-    });
-
-    await render(hbs`
-      <PikadayInput @maxDate={{this.maxDate}} @value={{this.currentDate}} @onSelection={{this.updateCurrentDate}}/>
-    `);
-
-    this.set('maxDate', today);
-    await settled();
-
-    assert.equal(
-      this.currentDate.getDate(),
-      today.getDate(),
-      'value should change'
-    );
-  });
-
   test("if value is null we don't enforce minDate or maxDate", async function (assert) {
     assert.expect(1);