Date Picker
Select single or multiple dates, ranges and more.
Basic example
Click the field to open the picker, then choose a value.
<div class="input-field">
<input id="birthdate" type="text" class="datepicker" placeholder=" " />
<label for="birthdate">Birthdate</label>
</div>Setup
Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.
Import the component and initialize it after the input exists. Use displayPlugin: 'docked' to open the picker next to the field.
import { Datepicker } from 'kmaterialize';
Datepicker.init(document.querySelector('#birthdate'), {
displayPlugin: 'docked'
});Examples and variants
Date format and limits
Pass a format and native Date bounds when initializing your field.
Datepicker.init(document.querySelector('#birthdate'), {
displayPlugin: 'docked',
format: 'yyyy-mm-dd',
minDate: new Date(2026, 0, 1),
maxDate: new Date(2026, 11, 31),
showClearBtn: true
});Validation
Use required on the date input. For text-based calendar inputs, validate the parsed date against your allowed dates; native min/max validation only applies to native date controls.
These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.
For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.
Required date
Date outside the range
<div class="input-field outlined error">
<i class="material-icons suffix" aria-hidden="true">error</i>
<input id="validation-date" type="text" class="datepicker" required placeholder=" " value="" aria-invalid="true" aria-describedby="validation-date-error">
<label for="validation-date">Appointment date</label>
<span id="validation-date-error" class="supporting-text">Choose an appointment date.</span>
</div>
<div class="input-field error">
<input id="validation-date-range" type="date" min="2027-01-01" placeholder=" " value="2026-12-20" aria-invalid="true" aria-describedby="validation-date-range-error">
<label for="validation-date-range">Delivery date</label>
<span id="validation-date-range-error" class="supporting-text"><i class="material-icons" aria-hidden="true">error</i> Choose a date on or after 1 January 2027.</span>
</div>Reference
Options
| Name | Type | Default | Description |
|---|---|---|---|
| format | String || Function | 'mmm dd, yyyy' | The date output format for the input field value or a function taking the date and outputting the formatted date string. |
| parse | Function | null | Used to create date object from current input string. |
| defaultDate | Date | null | The initial date to view when first opened. |
| setDefaultDate | Boolean | false | Make the defaultDate the initial selected value. |
| disableWeekends | Boolean | false | Prevent selection of any date on the weekend. |
| disableDayFn | Function | null | Custom function to disable certain days. |
| firstDay | Number | 0 | First day of week (0: Sunday, 1: Monday etc). |
| minDate | Date | null | The earliest date that can be selected. |
| maxDate | Date | null | The latest date that can be selected. |
| yearRange | Number || Array | 10 | Number of years either side, or array of upper/lower range. |
| yearRangeReverse | Boolean | false | Sort year range in reverse order |
| isRTL | Boolean | false | Changes Datepicker to RTL. |
| showMonthAfterYear | Boolean | false | Show month after year in Datepicker title. |
| showDaysInNextAndPreviousMonths | Boolean | false | Render days of the calendar grid that fall in the next or previous month. |
| container | Element || String | null | Specify a DOM element OR selector for a DOM element to render the calendar in, by default it will be placed before the input. |
| showClearBtn | Boolean | false | Show the clear button in the datepicker. |
| i18n | Object | See i18n documentation. | Internationalization options. |
| events | Array | [] | An array of string returned by `Date.toDateString()`, indicating there are events in the specified days. |
| onSelect | Function | null | Callback function when date is selected, first parameter is the newly selected date. |
| isDateRange | Boolean | false | Condition to enable date range selection. |
| dateRangeEndEl | Selector | null | (optional) selector for defined end date HTML element. |
| openByDefault | Boolean | false | Condition show the datepicker in open state by default. |
| onInputInteraction | Function | null | Callback function on input field interaction. |
Date format options
Use these in the format option to customize your date string.
| Key | Description | Output |
|---|---|---|
| d | Date of the month. | 1-31 |
| dd | Date of the month (2 digits). | 01-31 |
| ddd | Day of the week in short form set by the i18n option. | Sun-Sat |
| dddd | Day of the week in full form set by the i18n option. | Sunday-Saturday |
| m | Month of the year. | 1-12 |
| mm | Month of the year (2 digits). | 01-12 |
| mmm | Month of the year in short form set by the i18n option. | Jan-Dec |
| mmmm | Month of the year in full form set by the i18n option. | January-December |
| yy | 2-digit year. | 17 |
| yyyy | 4-digit year. | 2017 |
Datepicker Internationalization options
Use these in the i18n option to localize the datepicker.
| Key | Text |
|---|---|
| cancel | 'Cancel' |
| clear | 'Clear' |
| done | 'Ok' |
| previousMonth | '‹' |
| nextMonth | '›' |
| months |
|
| monthsShort |
|
| weekdays |
|
| weekdaysShort |
|
| weekdaysAbbrev | ['S','M','T','W','T','F','S'] |
Properties
| Name | Type | Description |
|---|---|---|
| el | Element | The input element the plugin was initialized with. |
| options | Object | The options the instance was initialized with. |
| isOpen | Boolean | If the picker is open. |
| date | Date | The selected Date. |
Methods
All the methods are called on the plugin instance. You can get the plugin instance like this:
const instance = Datepicker.getInstance(elem);
.toString();
Gets a string representation of the selected date
instance.toString();.setDate();
Set a date on the datepicker
Arguments
Date (optional): Date to set on the datepicker.
instance.setDate(new Date());.gotoDate();
Change date view to a specific date on the datepicker
Arguments
Date: Date to show on the datepicker.
instance.gotoDate(new Date());.destroy();
Destroy plugin instance and teardown
instance.destroy();