In this simple tutorial will take you step by step on how to create a date picker using materialize css.But wait,what is Materialize?

“Materialize is a modern responsive front-end framework based on material Design.”

Why use datepickers.

Date pickers allow/enable users to select a date from an interactive calender to reserve or book for services online.

Who uses datepickers/where are they applied.

Date pickers can be used by anyone depending on what services he/she is providing to the community or world at large.

The common places or services that use date pickers include:

• Hotels / Restaurants – Set room reservation date range
• Airport – Picking ticket reservation date.

Now lets see what it takes to implement or add the datepicker in/on your website or web application.

Tutorial

STEP 1.
Create the input element in your body section and give it a class of datepicker

<input type=”text” class=”datepicker”>

STEP 2.
For the datepicker to start working you need to initialize it using this simple code below.
Note:: Most of the components in materialize need to be initialized before use.

Javascript

Initialize the datepicker like this if you are using vinalla Javascript.

document.addEventListener(‘DOMContentLoaded’, function() {
var elems = document.querySelectorAll(‘.datepicker’);
var instances = M.Datepicker.init(elems, options);
});

Jquery

Initialize the datepicker like this if you are using the Jquery library.

$(document).ready(function(){
$(‘.datepicker’).datepicker();
});