Materialize CSS Date Picker and Time Picker Guide

Quick answer: A Materialize date picker is a text input with the datepicker class, initialised with M.Datepicker.init(input). The time picker follows the same pattern with the timepicker class and M.Timepicker.init(). Both are opt-in per input — M.AutoInit() will find them, but each picker binds to one specific element, so explicit initialisation is usually clearer. The single most common issue is a picker that opens at the wrong date because no defaultDate or setDefaultDate was set.

Part of our Materialize series. New to the framework? Start with the Materialize CSS tutorial for setup and version pinning.

Markup and initialisation

The input lives inside the standard input-field wrapper so it inherits the underline and floating label, then you initialise the picker on that input.

<div class="input-field col s6">
  <input id="start" type="text" class="datepicker">
  <label for="start">Start date</label>
</div>

<div class="input-field col s6">
  <input id="time" type="text" class="timepicker">
  <label for="time">Meeting time</label>
</div>

document.addEventListener('DOMContentLoaded', function () {
  const dateInput = document.querySelector('#start');
  M.Datepicker.init(dateInput, {
    format: 'yyyy-mm-dd',
    autoClose: true,
    minDate: new Date(),
  });

  const timeInput = document.querySelector('#time');
  M.Timepicker.init(timeInput, { twelveHour: true });
});

Note the type="text". A native type="date" input already has a browser picker, and Materialize’s picker would compete with it. Keep the field as text and let Materialize own the interaction. The format option decides how the value is written back into the input, so choose the format your server or spreadsheet expects.

Options that matter

Date picker option	Default	Effect
format	mmm dd, yyyy	Text written into the input when a date is chosen
defaultDate	null	Date the calendar opens on
setDefaultDate	false	Write defaultDate into the input immediately
minDate / maxDate	null	Earliest and latest selectable dates
autoClose	false	Close the calendar once a date is clicked
container	null	Parent element — set it to escape overflow clipping
disableDayFn	null	Return true for dates that should not be selectable

Time picker option	Default	Effect
defaultTime	now	Time the picker opens on
twelveHour	true	12-hour clock with AM and PM
autoclose	false	Close once a time is chosen
vibrate	true	Haptic feedback on supported mobile devices

Restricting selectable dates

Booking forms rarely accept any date. Combine minDate with disableDayFn to block weekends and past dates — the user sees disabled days rather than an error after the fact.

M.Datepicker.init(document.querySelector('#start'), {
  minDate: new Date(),
  autoClose: true,
  format: 'yyyy-mm-dd',
  disableDayFn: function (date) {
    const day = date.getDay();
    return day === 0 || day === 6; // block weekends
  },
});

The date picker accepts a range of options for the copy too, and if you need the label in another language you can set the month and day names through the i18n option object. That is the same approach the form components use, covered in the Materialize forms guide where selects and validation are also explained.

Getting and setting values

The selected date lives in the input as formatted text, but the instance also exposes date and time as JavaScript Date objects when you need to do something with them.

const instance = M.Datepicker.getInstance(document.querySelector('#start'));
console.log(instance.date);      // Date object
instance.setDate(new Date());    // programmatic selection

For the surrounding layout, the pickers sit inside the grid columns described in the Materialize grid system guide, and the submit button that saves the form is styled in the buttons guide.

Common mistakes

• Using type="date". The native picker clashes with Materialize’s; keep the field as text.
• No minDate. Users can pick dates in the past in booking forms when they should not.
• Wrong format. The output string must match what your backend parses.
• Clipped calendar. Inside a modal or a scrolling panel set the container option to move the calendar out of the clipping parent.
• Reading the value too early. Read the input on submit, not on init, because the value only fills after a selection.

Building a booking or scheduling form? Ampersand Academy teaches front-end development one-to-one, using your own project as the curriculum.

Frequently asked questions