angular-material-time-picker

Material design time picker for 12 and 24 hour time.

Showing:

Popularity

Downloads/wk

1K

GitHub Stars

51

Maintenance

Last Commit

3yrs ago

Contributors

6

Package

Dependencies

0

Size (min+gzip)

3.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

npm version

Looking for maintainers

There are people still using angular-material-time-picker in their projects and we have a few issues open + pull requests. This projects is open to new lead maintainers. Please contact the current maintainer.

Angular Material Time Picker (md-time-picker)

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.

Screenshots

On page

12 hour24 hour
12 Hour24 hour
12 Hour24 HourMinute
12Hour24 hourMinute

Demo

A live Codepen demo. The same html/css file is also included in the demoApp folder.

Requirements

  • 1.5.0 < AngularJS < 2 (angular-messages, angular-animate, angular-aria)
  • Angular Material > 1
  • Material Icons

Installation

Using npm

npm install angular-material-time-picker --save

You may use Webpack to inject this module into your application.

ES5

require('angular-material-time-picker/dist/md-time-picker.css');
var ngTimePicker = require('angular-material-time-picker');
angular.module('myApp', [ngTimePicker]);

ES6

import 'angular-material-time-picker/dist/md-time-picker.css';
import ngTimePicker from 'angular-material-time-picker';
angular.module('myApp', [ngTimePicker]);

Usage

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'
    }

    $scope.readonly = false;

    $scope.required = true;

}]);

Example Template

<md-time-picker ng-model="time" message="message" read-only="readonly" mandatory="required" 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)
  • read-only (set read only on input. Accepts true or false)
  • mandatory (input will be validated as required if true. Accepts true or false).

License

This software is provided free of charge and without restriction under the MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100