Font and theme export

Date Picker

Enhance a text input with the air-datepicker calendar/range picker.

Basic example

Choose a date from the calendar. Use data-date-picker="air-datepicker" to opt into this picker.

<div class="input-field">
  <input id="airdate-single" type="text" data-type="date" data-date-picker="air-datepicker" placeholder=" " readonly />
  <label for="airdate-single">Single date</label>
</div>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

AirDatepickerField enhances a text input with the air-datepicker calendar/range picker. This is a separate, opt-in component from kmaterialize's own native Datepicker - opt in with data-date-picker="air-datepicker", and add the multiple attribute (or data-date-range="true") to switch it into range-selection mode.

air-datepicker is an optional peer dependency, loaded on demand - install it yourself (npm install air-datepicker) and import its base stylesheet once: 


import 'air-datepicker/air-datepicker.css';

Load the picker stylesheet before kmaterialize/dist/css/materialize.css.


  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('input[data-date-picker="air-datepicker"]');
    const instances = AirDatepickerField.init(elems, {
      // specify options here
    });
  });

Examples and variants

Click any field or its calendar icon. These examples follow Air Datepicker's official option patterns.

event
calendar_month 
<div class="input-field">
  <input id="airdate-single" type="text" data-type="date" data-date-picker="air-datepicker" placeholder=" " readonly>
  <label for="airdate-single">Single date</label>
</div>

<div class="input-field">
  <input id="airdate-range" type="text" data-type="date" data-date-picker="air-datepicker" data-date-range="true" placeholder=" " readonly>
  <label for="airdate-range">Date range</label>
</div>

<div class="input-field">
  <i class="material-icons prefix">event</i>
  <input id="airdate-icon" type="text" data-type="date" data-date-picker="air-datepicker" placeholder=" " readonly>
  <label for="airdate-icon">With icon</label>
</div>

<div class="input-field">
  <input id="airdate-default" type="text" data-type="date" data-date-picker="air-datepicker" value="2026-09-15" placeholder=" " readonly>
  <label for="airdate-default">Default value</label>
</div>

<div class="input-field">
  <input id="airdate-time" type="text" data-type="date" data-date-picker="air-datepicker" data-date-timepicker="true" data-date-time-format="HH:mm" placeholder=" " readonly>
  <label for="airdate-time">Date and time</label>
</div>

Validation

A text-based calendar input supports required. Check parsed dates and ranges in your application, including availability returned by your server.

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
Choose a start date.
Unavailable date
This date is unavailable. Choose another day. 
<div class="input-field outlined error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-air-date" type="text" data-date-picker="air-datepicker" required placeholder=" " value="" aria-invalid="true" aria-describedby="validation-air-date-error">
    <label for="validation-air-date">Start date</label>
    <span id="validation-air-date-error" class="supporting-text">Choose a start date.</span>
</div>

<div class="input-field error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-air-unavailable" type="text" data-date-picker="air-datepicker" placeholder=" " value="12/24/2026" aria-invalid="true" aria-describedby="validation-air-unavailable-error">
    <label for="validation-air-unavailable">Appointment date</label>
    <span id="validation-air-unavailable-error" class="supporting-text">This date is unavailable. Choose another day.</span>
</div>

Reference

Options

Name Type Default Description
locale Object undefined An air-datepicker locale object, used when the input has data-date-lang="fr-FR" (only "fr-FR" is wired up so far).

Per-input attributes, matching the CrazyPHP convention this component was ported from:

Attribute Description
data-date-format air-datepicker format string, default yyyy-MM-dd.
multiple / data-date-range="true" Switches to range mode, joining the two dates with " - ".
min / max Bound the selectable range.
value Preselects one date, or two dates separated by " - " in range mode.
data-date-timepicker / data-date-time-format Enables time selection and optionally sets its format.
data-date-view / data-date-min-view Uses days, months, or years; set both to months for month-only selection.
data-date-buttons Comma-separated preset buttons: today,clear.
data-date-position Popup position such as right center.
data-date-mobile Set to true to use Air Datepicker's modal-style mobile presentation.
data-date-auto-close Set to false to keep the popup open, useful with action buttons.

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:


                  const instance = AirDatepickerField.getInstance(elem);
.destroy();

Destroy plugin instance and teardown the calendar popup.


instance.destroy();

Properties

Name Type Description
el Element The text input the plugin was initialized with.
ready Promise<void> Resolves once air-datepicker has loaded and the picker has been created.
picker AirDatepicker The underlying air-datepicker instance, once ready resolves.