This project is a fork of the original ng-material-datetimepicker. It adds angular-moment as a dependency.

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 or single click to select date and/or time
• Swipe left to go to next month or Swipe right to go to previous month
• Configurable first day of the week
• Support 24-hour format display
• Can disable dates, not selectable by user
• Can disable minutes view
• Compatible with right-to-left direction

Updates

| Date | Author | Description | | ---------- | --------------- | ---------------------------------------------------- | | 2017-06-07 | dhatawesomedude | Adapted plugin for Angular moment | | 2017-04-26 | hexadecy | New 24-hour clock face | | 2017-04-17 | hexadecy | Single click to select | | 2017-02-27 | hexadecy | Can hide minutes view, Month next and prev buttons | | 2017-02-22 | hexadecy | Fix for rtl website | | 2017-02-15 | hexadecy | Fix inputs are not bluring after selection is made | | 2017-01-30 | hexadecy | Add support only for angular 1.5.x - 1.6.x ($onInit) | | 2015-11-12 | logbon72 | Adapted plugin for Angular Material |

Dependencies

Depends on the following library:

• AngularJS Material
• AngularJS Animate
• AngularJS Aria
• AngularJS
• Angular moment

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.js"></script>

Installing via npm

npm i ng-material-ng-moment-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:

| Name | Type | Description | | ------------------------- | ----------------------- | -------------------------------------------------------------------- | | ng-model | (String|Date|Moment | Initial Date or model to assign the date to | | ng-change | Function | A function to call when the input value changes. | | format | String | MomentJS 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-time | Boolean | true => Display 12 hours AM|PM (default: false) | | min-date | (String|Date|Moment) | Minimum selectable date | | max-date | (String|Date|Moment) | Maximum selectable date | | date | Boolean | true => Has Datepicker (default: true) | | time | Boolean | true => Has Timepicker (default: true) | | minutes | Boolean | true => Has Timepicker minutes (default: true) | | cancel-text | String | Text for the cancel button (default: Cancel) | | today-text | String | Text for the today button (default: Today) | | ok-text | String | Text for the OK button (default: OK) | | week-start | Number | First day of the week (default: 0 => Sunday) | | disable-dates | Date[] | Dates to be disabled or not selectable by user. | | disable-parent-scroll | Boolean | true => Disable scrolling while the dialog is open (default : false) | | auto-ok | Boolean | true => Single click (default: false) |

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,
       minutes: {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',
       disableDates: {date[]} =[],
       disableParentScroll: {boolean} = false,
       autoOk: {boolean} =false
     }