Packages
mbta_metro
0.3.2
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
0.0.20
0.0.19
0.0.18
0.0.17
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
priv/js/hooks/date_picker.js
import camelcaseKeys from "camelcase-keys"
import { formatISO } from "date-fns"
import flatpickr from "flatpickr"
import { Mandarin } from "../../node_modules/flatpickr/dist/l10n/zh.js"
import { Portuguese } from "../../node_modules/flatpickr/dist/l10n/pt.js"
import { Spanish } from "../../node_modules/flatpickr/dist/l10n/es.js"
const SERVER_DATE_FORMAT = "Z"
const CONFIG = {
allowInvalidPreload: true, // needed on mobile to prevent the input from becoming blank when selecting a date outside the min/max
altInput: true, // allow different format to be sent to server
dateFormat: SERVER_DATE_FORMAT, // this gets sent to the server
disableMobile: true, // native date pickers are not working well with LiveView
formatDate: (date, formatString, _) => {
if (formatString === SERVER_DATE_FORMAT) {
// Formats a date into a string in the format util.ex parse/1 expects.
return formatISO(date);
}
const locale = document.querySelector(["[data-locale]"]).getAttribute("data-locale");
if (Object.keys(LOCALES).includes(locale)) {
return i18nDate(date, locale);
} else {
return i18nDate(date, "en");
}
},
wrap: true // works with adjacent icon
}
const LOCALES = {
es: Spanish,
pt: Portuguese,
zh: Mandarin
}
/**
* Formats a date into a string in the user's locale.
*/
const i18nDate = (date, locale = "en") => {
const formatter = new Intl.DateTimeFormat(locale, {
month: "long",
weekday: "short",
day: "numeric",
hour: "numeric",
minute: "numeric"
});
return formatter.format(date);
}
/**
* This is a LiveView hook that initializes a flatpickr date picker.
*/
export default {
mounted() {
const el = this.el.querySelector("#date-picker-calendar");
var customConfig = this.el.dataset.config ? JSON.parse(this.el.dataset.config) : {};
customConfig = camelcaseKeys(customConfig, {deep: true});
if (Object.keys(LOCALES).includes(this.el.dataset.locale)) {
customConfig.locale = LOCALES[this.el.dataset.locale]
}
this.pickr = flatpickr(el, Object.assign(CONFIG, customConfig));
// Set the step attribute to "any" on the mobile input.
// This is necessary for iOS Safari to allow for decimal values.
if (this.pickr.mobileInput) {
this.pickr.mobileInput.setAttribute("step", "any")
}
this.handleEvent("set-datetime", ({datetime}) => {
this.pickr.setDate(datetime);
});
},
destroyed() {
this.pickr.destroy();
}
}