Multilingual Date Time Picker jQuery Plugin

// Vanilla JS
new tempusDominus.TempusDominus(document.getElementById('example'), {
    // options here
});

// jQuery
$('#example').tempusDominus({
  // options here
});

const linkedPicker1Element = document.getElementById("linkedPickers1");
new tempusDominus.TempusDominus(document.getElementById("example"), {
    // enable/disable dates & times
    restrictions: {
        minDate: undefined,
        maxDate: undefined,
        disabledDates: [],
        enabledDates: [],
        daysOfWeekDisabled: [],
        disabledTimeIntervals: [],
        disabledHours: [],
        enabledHours: [],
    },

    // display options
    display: {
        icons: {
            // "icons" or "sprites"
            type: "icons",
            time: "fa-solid fa-clock",
            date: "fa-solid fa-calendar",
            up: "fa-solid fa-arrow-up",
            down: "fa-solid fa-arrow-down",
            previous: "fa-solid fa-chevron-left",
            next: "fa-solid fa-chevron-right",
            today: "fa-solid fa-calendar-check",
            clear: "fa-solid fa-trash",
            close: "fa-solid fa-xmark",
        },
        // display the date and time pickers side by side
        sideBySide: false,
        // display an additional column with the calendar week for that week
        calendarWeeks: false,
        // 'clock' | 'calendar' | 'months' | 'years' | 'decades'
        viewMode: "calendar",
        // 'top' | 'bottom'
        toolbarPlacement: "bottom",
        keepOpen: false,
        // enable/disable buttons
        buttons: {
            today: false,
            clear: false,
            close: false,
        },
        // enable/disable components
        components: {
            calendar: true,
            date: true,
            month: true,
            year: true,
            decades: true,
            clock: true,
            hours: true,
            minutes: true,
            seconds: false,
            useTwentyfourHour: false,
        },
        // inline mode
        inline: false,
    },

    // control how much the minutes are changed by
    stepping: 1,

    // use the current date/time
    useCurrent: true,

    defaultDate: undefined,

    localization: {
        today: "Go to today",
        clear: "Clear selection",
        close: "Close the picker",
        selectMonth: "Select Month",
        previousMonth: "Previous Month",
        nextMonth: "Next Month",
        selectYear: "Select Year",
        previousYear: "Previous Year",
        nextYear: "Next Year",
        selectDecade: "Select Decade",
        previousDecade: "Previous Decade",
        nextDecade: "Next Decade",
        previousCentury: "Previous Century",
        nextCentury: "Next Century",
        pickHour: "Pick Hour",
        incrementHour: "Increment Hour",
        decrementHour: "Decrement Hour",
        pickMinute: "Pick Minute",
        incrementMinute: "Increment Minute",
        decrementMinute: "Decrement Minute",
        pickSecond: "Pick Second",
        incrementSecond: "Increment Second",
        decrementSecond: "Decrement Second",
        toggleMeridiem: "Toggle Meridiem",
        selectTime: "Select Time",
        selectDate: "Select Date",
        dayViewHeaderFormat: { month: "long", year: "2-digit" },
        locale: "default",
        // 0 = Sunday, 6 = Saturday
        startOfTheWeek: 0,
    },

    keepInvalid: false,

    debug: false,

    // show the date picker on focus
    allowInputToggle: false,

    viewDate: new DateTime(),

    multipleDates: false,

    multipleDatesSeparator: "; ",

    promptTimeOnDateChange: false,

    promptTimeOnDateChangeTransitionDelay: 200,

    // provide developers a place to store extra information about the picker
    meta: {},

    // change the target container
    container: undefined,

    // enable date range selection
    dateRange: false,

    // custom separator for multiple dates
    multipleDatesSeparator: "; ",

    // placemenet
    placement: "bottom",
});

const myPicker = new tempusDominus.TempusDominus(document.getElementById('example'), {
      // ...
});

// return the current date
myPicker.viewDate

// return a DateTime object
myPicker.dates

// return the picked date
myPicker.dates.picked

// return the last picked date
myPicker.dates.lastPicked

// return the last picked index
myPicker.dates.lastPickedIndex

// add a DateTime
myPicker.dates.add(DateTime);

// set the date index
myPicker.dates.setValue(value: DateTime, index?: number);

// convert a DateTime object to a string
myPicker.dates.formatInput(value: DateTime);

// convert a string into a DateTime object
myPicker.dates.setFromInput(value: any, index?: number);

// return true if the target date is part of the selected dates array
myPicker.dates.isPicked(DateTime, Unit?);

// return the index at which target date is in the array
myPicker.dates.pickedIndex(DateTime, Unit?);

// clear all picked dates
myPicker.dates.clear();
// OR
myPicker.clear();

// toggle the date picker
myPicker.toggle();

// show the date picker
myPicker.show();

// hide the date picker
myPicker.hide();

// add/remove CSS classes
myPicker.paint(Unit | 'decade', DateTime, string[], HTMLElement);

// enable the date input
myPicker.enable();

// disable the date input
myPicker.disable();

// toggle the date input
myPicker.enable();

// destroy the date picker
myPicker.dispose();

// update options
myPicker.updateOptions(object, boolean?);

const myPicker = new tempusDominus.TempusDominus(document.getElementById("example"), {
    // ...
});

const subscription = picker.subscribe(tempusdominus.Namespace.events.change, (e) => {
    // on change
});

const subscription = picker.subscribe(tempusdominus.Namespace.events.show, (e) => {
    // on show
});

const subscription = picker.subscribe(tempusdominus.Namespace.events.hide, (e) => {
    // on hide
});

const subscription = picker.subscribe(tempusdominus.Namespace.events.update, (e) => {
    // on update
});

const subscription = picker.subscribe(tempusdominus.Namespace.events.error, (e) => {
    // on error
});