A Material Design date picker built with Angular Material and Moment.js. This cool Material design looking datepicker makes your angular form more attractive, you can easily integrate this datetime picker on your angular app.
HTML
="content" layout= "column" flex ng-app= "app" ng-controller= "MainCtrl as ctrl" >
="md-whiteframe-z2" >
="text-align: center;" >
>
>Material Design date/time pickers >
>
>
="column" layout-align= "center center" layout-padding>
=
"row" ng-form
= "demoForm" >
>
>Date picker >
>
="md-subhead" > Standard date picker >
="Date" ng-model= "currentDate" > >
>
>
="md-subhead" > Disabled date picker >
="Date" mdp-disabled= "true" ng-model= "currentDate" > >
>
>
="md-subhead" > Custom format + error messages >
required name= "dateFormat" mdp-placeholder= "My date(dd/mm/yyyy)" mdp-format= "DD/MM/YYYY" ng-model= "currentDate" >
=
"demoForm.dateFormat.$error" >
="required" > This is required
>
="format" > Invalid format
>
>
>
>
="md-subhead" > Min/max date >
="minMaxDate" mdp-placeholder= "Date" mdp-min-date= "'2000-01-01'" mdp-max-date= "'2005-01-01'" ng-model= "currentDate" >
=
"demoForm.minMaxDate.$error" >
="required" > This is required
>
="format" > Invalid format
>
="minDate" > Min date
>
="maxDate" > Max date
>
>
>
>
="md-subhead" > Filtering date >
="Date" mdp-date-filter= "ctrl.filterDate" ng-model= "currentDateMinMax" > >
>
>
="md-subhead" > Using $mdpDatePicker service >
="md-raised md-warn" ng-click= "ctrl.showDatePicker($event)" aria-label= "show picker" > show picker >
{ { currentDate | date
: 'shortDate' } }
>
>
>
>Time picker >
>
="md-subhead" > Standard time picker >
="currentDate" > >
>
>
="md-subhead" > Disabled time picker >
="true" ng-model= "currentDate" > >
>
>
="md-subhead" > Auto switch between hours and minutes >
="true" ng-model= "currentTime" > >
>
>
="md-subhead" > Custom format + error messages >
="timeFormat" ng-model= "currentTimeText" mdp-format= "HH:mm A" >
=
"demoForm.timeFormat.$error" >
="required" > This is required
>
="format" > Invalid format
>
>
>
=
"time" ng-model
= "test" mdp-time-picker /
>
>
="md-subhead" > Using $mdpTimePicker service >
="md-raised md-warn" ng-click= "ctrl.showTimePicker($event)" aria-label= "show picker" > show picker >
{ { currentTime | date
: 'HH:mm' } }
>
>
>
>
Material Design date/time pickers
Date picker
Standard date picker
Disabled date picker
Custom format + error messages
This is required
Invalid format
Min/max date
This is required
Invalid format
Min date
Max date
Filtering date
Using $mdpDatePicker service
show picker
Time picker
Standard time picker
Disabled time picker
Auto switch between hours and minutes
Custom format + error messages
This is required
Invalid format
Using $mdpTimePicker service
show picker
CSS
body {
font-family : 'Roboto' , sans-serif ;
}
#content {
height : 100% ;
}
#content > md-content {
background-color : #eee ;
}
body {
JS
( function ( ) {
var module = angular.module ( "app" , [
"ngMaterial" ,
"ngAnimate" ,
"ngAria" ,
"ngMessages" ,
"mdPickers"
] ) ;
module.controller ( "MainCtrl" , [ '$scope' , '$mdpDatePicker' , '$mdpTimePicker' , function ( $scope, $mdpDatePicker, $mdpTimePicker) {
$scope.currentDate = new Date ( ) ;
this .showDatePicker = function ( ev) {
$mdpDatePicker( $scope.currentDate , {
targetEvent: ev
} ) .then ( function ( selectedDate) {
$scope.currentDate = selectedDate;
} ) ;;
} ;
this .filterDate = function ( date) {
return moment( date) .date ( ) % 2 == 0 ;
} ;
this .showTimePicker = function ( ev) {
$mdpTimePicker( $scope.currentTime , {
targetEvent: ev
} ) .then ( function ( selectedDate) {
$scope.currentTime = selectedDate;
} ) ;;
}
} ] ) ;
} ) ( ) ;
(function() {
See live demo and download source code.DEMO DOWNLOAD
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by alenaksu . Visit their official repository for more information and follow for future updates.
Related
