Angular Material has a date picker, but no time picker. This module is an effort to implement a time picker in Angular Material.
The modal popup is based off mdPickers, but with modifications for 24 hour time, removal of dependency on momentjs, and improvements in usability.
The "time input field" is made up of three individual text inputs for hour, minute, and meridiem. This allows better cross browser support, especially for older browsers that do not support time input.
| 12 hour | 24 hour |
|---|---|
 |
 |
| 12 Hour | 24 Hour | Minute |
|---|---|---|
 |
 |
 |
A live Codepen demo. The same html/css file is also included in the demoApp folder.
- 1.5.0 < AngularJS < 2 (angular-messages, angular-animate, angular-aria)
- Angular Material > 1
- Material Icons
npm install angular-material-time-picker --save
You may use Webpack to inject this module into your application.
require('angular-material-time-picker/dist/md-time-picker.css');
var ngTimePicker = require('angular-material-time-picker');
angular.module('myApp', [ngTimePicker]);import 'angular-material-time-picker/dist/md-time-picker.css';
import ngTimePicker from 'angular-material-time-picker';
angular.module('myApp', [ngTimePicker]);Example Controller
angular.module('demoApp')
.controller('demoAppController', ['$scope','$mdpTimePicker', function($scope) {
// Model bound to input fields and modal
$scope.time = new Date();
// Optional message to display below each input field
$scope.message = {
hour: 'Hour is required',
minute: 'Minute is required',
meridiem: 'Meridiem is required'
}
}]);Example Template
<md-time-picker ng-model="time" message="message" no-meridiem no-auto-switch></md-time-picker>Optional Attributes
- message (takes an object with keys: hour, minute, and meridiem)
- no-meridiem (changes time picker to 24 hour time, 12 hour time is default)
- no-auto-switch (stops modal from switching to minutes automatically after an hour is pressed)
This software is provided free of charge and without restriction under the MIT License