Demo : Material Design date time picker

HTML

[code language=”html”]
<md-content id="content" layout="column" flex ng-app="app" ng-controller="MainCtrl as ctrl">
<md-toolbar class="md-whiteframe-z2">
<div style="text-align: center;">
<h1>mdPickers</h1>
<h2>Material Design date/time pickers</h2>
</div>
</md-toolbar>

<md-content flex layout="column" layout-align="center center" layout-padding>
<h3><a href="https://github.com/alenaksu/mdPickers">https://github.com/alenaksu/mdPickers</a></h3>

<div layout="row" ng-form="demoForm">
<div layout-padding>
<h2>Date picker</h2>
<div>
<h4 class="md-subhead">Standard date picker</h4>
<mdp-date-picker mdp-placeholder="Date" ng-model="currentDate"></mdp-date-picker>
</div>
<div>
<h4 class="md-subhead">Disabled date picker</h4>
<mdp-date-picker mdp-placeholder="Date" mdp-disabled="true" ng-model="currentDate"></mdp-date-picker>
</div>
<div>
<h4 class="md-subhead">Custom format + error messages</h4>
<mdp-date-picker mdp-open-on-click required name="dateFormat" mdp-placeholder="My date(dd/mm/yyyy)" mdp-format="DD/MM/YYYY" ng-model="currentDate">
<div ng-messages="demoForm.dateFormat.$error">
<div ng-message="required">This is required</div>
<div ng-message="format">Invalid format</div>
</div>
</mdp-date-picker>
</div>
<div>
<h4 class="md-subhead">Min/max date</h4>
<mdp-date-picker name="minMaxDate" mdp-placeholder="Date" mdp-min-date="’2000-01-01’" mdp-max-date="’2005-01-01’" ng-model="currentDate">
<div ng-messages="demoForm.minMaxDate.$error">
<div ng-message="required">This is required</div>
<div ng-message="format">Invalid format</div>
<div ng-message="minDate">Min date</div>
<div ng-message="maxDate">Max date</div>
</div>
</mdp-date-picker>
</div>
<div>
<h4 class="md-subhead">Filtering date</h4>
<mdp-date-picker mdp-placeholder="Date" mdp-date-filter="ctrl.filterDate" ng-model="currentDateMinMax"></mdp-date-picker>
</div>
<div>
<h4 class="md-subhead">Using $mdpDatePicker service</h4>
<md-button class="md-raised md-warn" ng-click="ctrl.showDatePicker($event)" aria-label="show picker">show picker</md-button>
<p>
{{ currentDate | date:’shortDate’ }}
</p>
</div>
</div>
<div layout-padding>
<h2>Time picker</h2>
<div>
<h4 class="md-subhead">Standard time picker</h4>

<mdp-time-picker ng-model="currentDate"></mdp-time-picker>
</div>

<div>
<h4 class="md-subhead">Disabled time picker</h4>
<mdp-time-picker mdp-disabled="true" ng-model="currentDate"></mdp-time-picker>
</div>

<div>
<h4 class="md-subhead">Auto switch between hours and minutes</h4>

<mdp-time-picker mdp-auto-switch="true" ng-model="currentTime"></mdp-time-picker>
</div>

<div>
<h4 class="md-subhead">Custom format + error messages</h4>
<mdp-time-picker name="timeFormat" ng-model="currentTimeText" mdp-format="HH:mm A">
<div ng-messages="demoForm.timeFormat.$error">
<div ng-message="required">This is required</div>
<div ng-message="format">Invalid format</div>
</div>
</mdp-time-picker>
</div>

<input type="time" ng-model="test" mdp-time-picker />

<div>
<h4 class="md-subhead">Using $mdpTimePicker service</h4>
<md-button class="md-raised md-warn" ng-click="ctrl.showTimePicker($event)" aria-label="show picker">show picker</md-button>
<p>
{{ currentTime | date:’HH:mm’ }}
</p>
</div>
</div>
</div>
</md-content>
</md-content>
[/code]

CSS / LESS

[code language=”css”]
body {
font-family: ‘Roboto’, sans-serif;
}

#content { height: 100%; }

#content > md-content {
background-color: #eee;
}

[/code]

JS

[code language=”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;
});;
}
}]);
})();
[/code]

mdPickers – date/time pickers

The post Material Design date/time pickers for Angular Material appeared first on csshint - A designer hub.