amd

angular-material-datetimepicker

Datepicker for Angular Material, mimick's Android's date time picker

Showing:

Popularity

Downloads/wk

16

GitHub Stars

174

Maintenance

Last Commit

5yrs ago

Contributors

38

Package

Dependencies

2

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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
2017-01-30hexadecyAdd support only for angular 1.5.x - 1.6.x ($onInit)
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

Dependencies

Depends on the following library:

  • AngularJS Material
  • AngularJS Animate
  • AngularJS Aria
  • AngularJS
  • Moment

Installing via yarn or npm

yarn add ng-material-datetimepicker
npm i ng-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"
               show-todays-date
               placeholder="Time"
               min-date="minDate"
               format="hh:mm a"
               ng-change="vm.saveChange()"
               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
ng-changeFunctionA function to call when the input value changes.
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)
today-textStringText for the today button (default: Today)
ok-textStringText for the OK button (default: OK)
week-startNumberFirst day of the week (default: 0 => Sunday)

Date/Time Dialog Service

You can also use the Date Time picker as a service, using the mdcDateTimeDialog service. The dialog returns a promise which is resolved with the selected date-time value and rejected on cancellation.

Example usage:

    someModule.controller('DemoCtrl', function ($scope, mdcDateTimeDialog) {

      $scope.displayDialog = function () {
        mdcDateTimeDialog.show({
          maxDate: $scope.maxDate,
          time: false
        })
          .then(function (date) {
            $scope.selectedDateTime = date;
            console.log('New Date / Time selected:', date);
          }, function() {
            console.log('Selection canceled');
          });
      };
    })

The mdcDateTimeDialog.show accepts the same options as the directive.

     {
       date: {boolean} =true,
         time: {boolean} =true,
         format: {string} ='YYYY-MM-DD',
         minDate: {strign} =null,
         maxDate: {string} =null,
         currentDate: {string} =null,
         lang: {string} =mdcDatetimePickerDefaultLocale.locale,
         weekStart: {int} =0,
         shortTime: {boolean} =false,
         cancelText: {string} ='Cancel',
         todayText: {string} ='Today',
         okText: {string} ='OK',
         amText: {string} ='AM',
         pmText: {string} ='PM'
     }

Important Note on Using Locales

Please see this issue. To use a locale with your date time picker dialog, you'll have to include the moment.js locale file.

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
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial