Materialize Date Picker


Materialize Date Picker : Date Picker is an important component of any framework which enables us to select the date from the calendar. Materialize provides a script to create cool date picker which can be easily integrated anywhere. Here in this tutorial, we are going to explain how you can use date picker script in Materialize Css. You can also use our online editor to edit and run the code online.


Materialize Date Picker | Time Picker| Calender | Format | Options | MaterializeCss Example

Let us create a simple date picker in Materialize. There are basically two parts first html and second JavaScript, in html part just create an input type date and add a class name to this, JavaScript part contains the calendar initialization part. Here is complete example of Date Picker –

Materialize Date Picker Example:

<input type="date" class="datepicker">  
 <script>
$('.datepicker').pickadate({
    selectMonths: true, // Enable Month Selection
    selectYears: 10 // Creates a dropdown of 10 years to control year
  });
</script>

Try it »

If you run the above example it will produce output something like this –

:

Materialize Date Picker Example

Date Format

If you want to set or change the date format, you can do this by passing format:’dd/mm/yyyy’ option simply as below-

Date Picker Format In Materialize Caleneder:

<input type="date" class="datepicker">  
 <script>
$('.datepicker').pickadate({
    selectMonths: true, // Enable Month Selection
    selectYears: 10, // Creates a dropdown of 10 years to control year
    format:'dd/mm/yyyy'
  });
</script>

Try it »

Options Format

Following options / Format are available for configuration of Date Picker.

  • selectMonths(Boolean): It is used to Create a dropdown to control month.You can pass true to control month.
  • format(dateFormat)– Use this parameter to set the date Format example – format: ‘d/mm/yyyy’.
  • selectYears(Number): Creates a dropdown of years to control year example – selectYears(15) this will allow to control 15 years on calender.

  • today(String)– This is used to set Today Button Text Label.
  • clear(String)– Clear Button Label Text.
  • close(String)– Close Button Label Text.
  • closeOnSelect(Boolean)– Pass true if you want to close datepicker automatically once user selects date.

Time Picker

You can initialize timepicker using class on input field. Here is an example of timepicker in Materialize Css.

Date Picker Format In Materialize Caleneder:

<input type="text" class="timepicker">  
 <script>
 $('.timepicker').pickatime({
    default: 'now', // Set default time: 'now', '1:30AM', '16:30'
    fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
    twelvehour: false, // Use AM/PM or 24-hour format
    donetext: 'OK', // text for done-button
    cleartext: 'Clear', // text for clear-button
    canceltext: 'Cancel', // Text for cancel-button
    autoclose: false, // automatic close timepicker
    ampmclickable: true, // make AM PM clickable
    aftershow: function(){} //Function for after opening timepicker
  });
</script>

Materialize timepicker looks like this-

Materialize Timepicker


Advertisements

Add Comment

📖 Read More