Materialize is a modern and responsive front-end framework based on Material Design. Today we Create Date Picker using Materialize Framework.
Introduction
Materialize framework is a modern designing framework that is based on material design. The materialize framework provides the CDN link of CSS and JS which we use to develop the design component.
Materialize framework provides,
- Focused user experience.
- Speedup the front-end design and development.
- And Easy to work with.
Steps to Create Date Picker using Materialize Framework
Here are some steps which we use to develop the Materialize Date Picker,
- Setup Materialize CSS and JS and jQuery CDN links on the
<head>. - Creating the input type with text type.
- Calling the Jquery DatePicker function.
Setup CDN links
Here are the all the CDN link,
- jQuery CDN
- Materialize CSS and JS CDN
|
1 2 3 4 5 6 |
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> |
Creating The Input Box
Here we create the input box with type text which is used for date-picker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <div class="container"> <div class="row"> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <span class="flow-text">Materialize Date Picker</span> <input type="text" class="datepicker"> </div> </div> </div> </div> </div> </body> |
Calling jQuery DatePicker function
For creating the Date Picker we use the jQuery Date Picker which adapt materialize CSS and JS for responsive and modern view.
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $('.datepicker').datepicker(); }); </script> |
Complete Source Code of the Materialize Date Picker with live view,
See the Pen Date Picker using Materialize Framework by Bikash Panda (@phpcodertech) on CodePen.
You can visit and get other details from Official Materialize website https://materializecss.com/
If you facing any issue on implementation of Date Picker please comment. I will try to resolve the issue.
Also check:
- Page Speed Checker using Google PageSpeed API
- PayPal Integration using Braintree API
- Auto Expand Input & Textarea Based on Text Length
- Load Dynamic Content in Bootstrap Modal using Ajax
Happy Coding..!
Put a Background Image on Text in HTML
5 Replies to “Create Date Picker using Materialize Framework”