Skip to content
Go to file
This branch is even with ch00kz:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A datepicker ( & screenshot below) inspired by material design's pickers, using Moment.js (



  • Add the material-datepicker folder to your project
  • Add the dependencies & material-datepicker JS and CSS.
  • If you moved any of the files around you'll need to ensure that the CSS is correctly pointing to the Roboto fonts (included in material-datepicker/fonts/)
		<!-- dependencies -->
		<script src="libs/moment.min.js"></script>
		<script src="libs/jquery-2.1.3.min.js"></script>
		<script src="libs/knockout-3.2.0.js"></script>
		<!-- /dependencies -->
		<script src="material-datepicker/js/material.datepicker.js"></script>
		<link rel="stylesheet" type="text/css" href="material-datepicker/css/material.datepicker.css">
  • Initialize material-datepicker on an input field. (doesn't play well when the input field is of type="date")
  <input id="one" style="font-size:16px;height:30px;border-radius:2px;border:1 solid gray;padding:0px 10px">
  var options = {};


The default option values are :

Option Default
format "DD/MM/YYYY"

Date format options (see

Input Example Description
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp

##To Do (feature checklist)

  • Format of date string
  • Limit Date Range
  • Change base colour of picker
  • Time picker


Datepicker inspired by material design's pickers



No releases published


No packages published
You can’t perform that action at this time.