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 etc.

Tutorial

Live Example

From:

To:

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

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

Markup

  <input class="datepicker" type="text" />

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 vanilla Javascript.

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

 

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

           
 $(document).ready(function(){
    $('.datepicker').datepicker();
 });

 

For more details visit the official page for Materialize: https://materializecss.com/pickers.html