@limetech/lime-elements
Version:
95 lines (94 loc) • 3.35 kB
JavaScript
import flatpickr from "flatpickr";
import FlatpickrLanguages from "flatpickr/dist/l10n";
import "moment/locale/da";
import "moment/locale/de";
import "moment/locale/fi";
import "moment/locale/fr";
import "moment/locale/nb";
import "moment/locale/nl";
import "moment/locale/sv";
import moment from "moment/moment";
import { isAndroidDevice, isIOSDevice } from "../../../util/device";
const ARIA_DATE_FORMAT = 'F j, Y';
export class Picker {
constructor(language, change, dateFormat) {
this.change = change;
this.formatter = (date) => moment(date).locale(this.getMomentLang()).format(this.dateFormat);
this.language = 'en';
this.language = language;
const isMobile = isIOSDevice() || isAndroidDevice();
this.nativePicker = isMobile;
if (dateFormat) {
this.dateFormat = dateFormat;
}
this.getWeek = this.getWeek.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleOnClose = this.handleOnClose.bind(this);
this.getFlatpickrLang = this.getFlatpickrLang.bind(this);
}
init(element, container, value) {
const config = Object.assign({ clickOpens: this.nativePicker, disableMobile: !this.nativePicker, formatDate: this.nativePicker ? undefined : this.formatDate, appendTo: container, onClose: this.handleOnClose, defaultDate: value, onValueUpdate: this.handleClose, inline: !this.nativePicker, locale: FlatpickrLanguages[this.getFlatpickrLang()] ||
FlatpickrLanguages.en, getWeek: this.getWeek }, this.getConfig(this.nativePicker));
// Week numbers designate weeks as starting with Monday and
// ending with Sunday. To make the week numbers make sense,
// the calendar has to show weeks in the same way.
config.locale.firstDayOfWeek = 1;
this.flatpickr = flatpickr(element, config);
}
setValue(value) {
this.flatpickr.setDate(value, false);
}
redraw() {
this.flatpickr.redraw();
}
destroy() {
if (!this.flatpickr) {
return;
}
this.flatpickr.destroy();
}
handleClose(selectedDates) {
return new Promise((resolve) => {
setTimeout(() => {
const pickerDate = this.getPickerDate(selectedDates);
this.change.emit(pickerDate);
resolve(pickerDate);
}, 0);
});
}
getFlatpickrLang() {
if (this.language === 'nb') {
return 'no';
}
return this.language;
}
getMomentLang() {
if (this.language === 'no') {
return 'nb';
}
return this.language;
}
getPickerDate(selectedDates) {
return selectedDates[0] ? new Date(selectedDates[0].toJSON()) : null;
}
get formatDate() {
const longDateFormat = new Intl.DateTimeFormat(this.language, {
dateStyle: 'long',
});
return (date, format) => {
if (!date) {
return '';
}
if (format === ARIA_DATE_FORMAT) {
return longDateFormat.format(date);
}
return this.formatter(date);
};
}
getWeek(date) {
return moment(date).isoWeek();
}
handleOnClose() {
this.flatpickr.element.focus();
}
}