e310c08af1
* refactor: used IsDate validator instead of custom isValidDate function * fix: used IsDate validator to validate modelValue before it's passed to lion-calendar's selctedDate * test: Updated lion-input-datepicker tests to include example of handling invalid modelValue * docs: Updated docs to include example with invalid modelValue * refactor: updated returned type of __getSyncDownValue method * changset: updated changeset for @lion/ui * refactor: linting fix * refactor: import path updated Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com> * refactor: label added to Faulty prefilled datepicker input Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com> * test: updated test to include more obvious invalid date value --------- Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import { IsDate } from '@lion/ui/form-core.js';
|
|
import { LionInput } from '@lion/ui/input.js';
|
|
import { formatDate, LocalizeMixin, parseDate } from '@lion/ui/localize-no-side-effects.js';
|
|
|
|
/**
|
|
* `LionInputDate` has a .modelValue of type Date. It parses, formats and validates based
|
|
* on locale.
|
|
*
|
|
* @customElement lion-input-date
|
|
*/
|
|
export class LionInputDate extends LocalizeMixin(LionInput) {
|
|
/** @type {any} */
|
|
static get properties() {
|
|
return {
|
|
modelValue: Date,
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
/**
|
|
* @param {string} value
|
|
*/
|
|
this.parser = value => (value === '' ? undefined : parseDate(value));
|
|
this.formatter = formatDate;
|
|
this.defaultValidators.push(new IsDate());
|
|
// Just explicitly make clear we shouldn't use type 'date'
|
|
this.type = 'text';
|
|
}
|
|
|
|
/** @param {import('lit').PropertyValues } changedProperties */
|
|
updated(changedProperties) {
|
|
super.updated(changedProperties);
|
|
if (changedProperties.has('locale')) {
|
|
this._calculateValues({ source: null });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Date} modelValue
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
serializer(modelValue) {
|
|
const isDate = new IsDate();
|
|
if (isDate.execute(modelValue)) {
|
|
return '';
|
|
}
|
|
// modelValue is localized, so we take the timezone offset in milliseconds and subtract it
|
|
// before converting it to ISO string.
|
|
const offset = modelValue.getTimezoneOffset() * 60000;
|
|
return new Date(modelValue.getTime() - offset).toISOString().slice(0, 10);
|
|
}
|
|
|
|
/**
|
|
* @param {string} serializedValue
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
deserializer(serializedValue) {
|
|
return new Date(serializedValue);
|
|
}
|
|
}
|