1.4.0 • Published 8 years ago

angular-material-datetimepicker v1.4.0

Weekly downloads
130
License
-
Repository
github
Last release
8 years ago

Angular Material DateTimePicker

Originally designed for Bootstrap Material, this has been modified to work with Angular Material. This is an Android style date-time picker for Angular Material. Some added features include:

  • Double click to select date or time
  • Swipe left to go to next month or Swipe right to go to previous month.

Updates

I have kept this section of the document as an acknowledgement for all the work done on the original Bootstrap Material plugin

DateAuthorDescription
2015-11-12logbon72Adapted plugin for Angular Material
2015-10-19benletchfordFixed not being able to tab into input
2015-10-19drblueFixed erroneous package.json-file
2015-10-19PerdonaFix auto resize when month has 6 weeks
2015-07-01T00rkRedesigned element without using modal
2015-06-16T00rkUse Timepicker alone / Display short time (12 hours)
2015-06-13T00rkFixed issue with HTML value tag
2015-05-25T00rkChanged repo name to bootstrap-material-datetimepicker *
2015-05-12T00rkAdded parameters for button text
2015-05-05SovannaFIX undefined _minDate in isBeforeMaxDate func
2015-04-10T00rkLittle change in clock design
2015-04-10PeterzenAdded bower and requirejs support
2015-04-08T00rkFixed problem on locale switch
2015-03-04T00rkAdded Time picker

(*) File names have been changed

bootstrap-material-datepicker.js => bootstrap-material-datetimepicker.js

bootstrap-material-datepicker.css => bootstrap-material-datetimepicker.css

Dependencies

Depends on the following library:

  • Angular Material & it's dependencies
  • Angular Touch
  • MomentJS

Installing via Bower

bower install angular-material-datetimepicker

Live Example

Click here to see live examples.

Usage

Add the plugin module as a dependency to your AngularJS module:

    angular.module('myAwesomeModule', [
      //other dependencies ignored
      'ngMaterialDatePicker'
    ]);

This plugin exposes a directive which should be used as an attribute for an input element. The directive is mdc-datetime-picker. An example of this is given below:

    <md-input-container flex-gt-md="30">
        <label>Timepicker Only</label>
        <input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
               placeholder="Time"
               min-date="minDate"
               format="hh:mm a"
               ng-model="time">
    </md-input-container>

Directive Attributes

The directive accepts several attributes which are described below:

NameTypeDescription
ng-model(String|Date|Moment)Initial Date or model to assign the date to
formatStringMomentJS Format,defaults to HH:mm for time picker only, YYYY-MM-DD for date picker only and YYYY-MM-DD HH:mm for both timepicker and date picker
short-timeBooleantrue => Display 12 hours AM|PM
min-date(String|Date|Moment)Minimum selectable date
max-date(String|Date|Moment)Maximum selectable date
dateBooleantrue => Has Datepicker (default: true)
timeBooleantrue => Has Timepicker (default: true)
cancel-textStringText for the cancel button (default: Cancel)
ok-textStringText for the OK button (default: OK)