Skip to content

Commit

Permalink
Merge pull request #593 from teamanvyl/fix/do-not-automatically-restr…
Browse files Browse the repository at this point in the history
…ict-values-to-min-or-max-dates

fix: Prevent ember-pikaday from automatically updating values to within a min/max date bounds
  • Loading branch information
MelSumner authored Feb 6, 2024
2 parents f6e8637 + 696c65f commit b0c470b
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 78 deletions.
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
25 changes: 2 additions & 23 deletions src/modifiers/pikaday.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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;
}
}
66 changes: 12 additions & 54 deletions test-app/tests/integration/components/pikaday-input-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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);

Expand Down

0 comments on commit b0c470b

Please sign in to comment.