Date Picker | Vanilla

Note: The JS and CSS files for the date picker is an addon to the main global files.

Make sure that you have both the global and datepicker files loaded. The order is important and the datepicker files must come after the global files.

<link rel="stylesheet" href="/-/digit/datepicker/datepicker.css" />
<script src="/-/digit/datepicker/datepicker.js"></script>

The date picker utilizes the flatpickr v4 script. For more information on plugins, options and hooks go to https://flatpickr.js.org/.

The date picker can be as simple as running the javascript function dk.datePicker("id_of_input"). Note: An unique ID is required for the date picker to run properly. Additional settings can be activated by adding the following data-attributes to the input:

  • data-mindate-today
  • data-maxdate-today
  • data-disable-weekends
  • data-disable-holidays (disables standard DigiKey US holidays)

Options can be passed from the function, example: dk.datePicker("#datepicker_1", { maxDate: "today" }. When options are passed this way it will override any of the data-attribute settings above. View available options at https://flatpickr.js.org/options/.

Code Example:

    setTimeout(function () {
    dk.datePicker("#datepicker_0");
    dk.datePicker("#datepicker_1");
    dk.datePicker("#datepicker_2");
    dk.datePicker("#datepicker_3");
    }, 1000);

Code Preview:

Date Picker

<div style="max-width:400px">
        <div class="dk-input-group">
            <span class="dk-input-label">
                Standard Date Picker
            </span>
            <input
                class="dk-input"
                id="datepicker_0"
            />
        </div>
        <div class="dk-input-group">
            <span class="dk-input-label">
                Diable Weekends and Holidays Date
                Picker
            </span>
            <input
                class="dk-input"
                id="datepicker_1"
                data-disable-weekends="true"
                data-disable-holidays="true"
            />
        </div>
        <div class="dk-input-group">
            <span class="dk-input-label">
                Min Date Today Date Picker
            </span>
            <input
                class="dk-datepicker dk-input"
                id="datepicker_2"
                data-mindate-today="true"
            />
        </div>
        <div class="dk-input-group">
            <span class="dk-input-label">
                Max Date Today Date Picker
            </span>
            <input
                class="dk-datepicker dk-input"
                id="datepicker_3"
                data-maxdate-today="true"
            />
        </div>
    </div>

Javascript

e=>{e.datePicker("#datepicker_0"),e.datePicker("#datepicker_1"),e.datePicker("#datepicker_2"),e.datePicker("#datepicker_3")}