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/.
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
dk => {
dk.datePicker("#datepicker_0");
dk.datePicker("#datepicker_1");
dk.datePicker("#datepicker_2");
dk.datePicker("#datepicker_3");
}