Angular Demo
HTML / AngularJS Code
Output
<!DOCTYPE html> <html ng-app="mdDatetimePickerDemo"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'> <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="css/angular-datetimepicker/material-datetimepicker.css" type="text/css"/> <head> </head> <body ng-controller="DemoCtrl" layout="column"> <md-content class="md-padding"> <div layout="column"> <h1>Extended Angular Material DatePicker</h1> </div> <md-card layout="column"> <md-toolbar class="md-primary"> <div class="md-toolbar-tools"> <h2> <span>A demo of date picker</span> </h2> </div> </md-toolbar> <md-card-content class="md-padding"> <p> You can double click / double tap to make selections. </p> <div layout-gt-md="row" layout="column" layout-align-gt-md="center center"> <md-input-container flex-gt-md="30"> <label>Datepicker Only</label> <input time="false" date="true" mdc-datetime-picker type="text" id="date" placeholder="Date" ng-model="date" min-date="minDate" max-date="maxDate"> </md-input-container> <div flex-gt-md="grow" flex-md="initial" ex-source-code target="input"></div> </div> </md-card-content> </md-card> </md-content> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script> <script type="text/javascript" src="js/angular-datetimepicker/beautifier.js"></script> <script type="text/javascript" src="js/angular-datetimepicker/angular-material-datetimepicker.js"></script> <script type="text/javascript" src="js/angular-datetimepicker/demo.js"></script> </body> </html>
Extended Angular Material DatePicker
A demo of date picker
You can double click / double tap to make selections.
Datepicker Only