apex4x
Version:
The Comprehensive ARIA Development Suite
57 lines (50 loc) • 2.13 kB
JavaScript
$A.import(["Animate", "Datepicker"], { defer: true }, function () {
$A.setDatepicker({
// Unique ID for the date picker instance
// After instantiation, can be referenced using: var DC = $A("UniqueCalendarId");
id: "UniqueCalendarId",
// Icon triggering element
toggle: $A.get("dateIcon"),
// Native or simulated input element
input: $A.get("date"),
// Optionally convert the static year field into a year selector dropdown.
yearSelect: true,
yearSelectMin: 1900,
yearSelectMax: new Date().getFullYear() + 5,
// Optionally convert the static month field into a month selector dropdown.
monthSelect: true,
// Force the month/year select dropdown to render instead of a button.
forceSelect: false,
style: { position: "absolute", zIndex: 1, display: "none" },
animate: {
onRender: function (dc, wrapper, next) {
$A.Velocity(wrapper, "transition.fadeIn", {
complete: function () {
// Running next() is required to continue executing built-in lifecycle methods such as afterRender() when the animation completes.
next();
},
});
},
onRemove: function (dc, wrapper, next) {
$A.Velocity(wrapper, "transition.fadeOut", {
complete: function () {
// Running next() is required to continue executing built-in lifecycle methods such as afterRender() when the animation completes.
next();
},
});
},
},
// Using a token system, set a specific date string format to be used when setting the selected value into the calendar input box
// 'YYYY': 4 digit year, 2019
// 'MMMM': Full name of month, January, etc.
// 'dddd': Full name of weekday, Monday, etc.
// 'MM': 2 digit month, 01, etc.
// 'DD': 2 digit day, 01, etc.
// 'Do': getDateOrdinalSuffix, 1st, 2nd, 3rd.
// 'M': 1 or 2 digit month, 1 through 12
// 'D': 1 or 2 digit day, 1 through 31.
inputDateFormat: "MM/DD/YYYY",
// Condense the year display by removing the year nav buttons
condenseYear: true,
});
});