Skip to content

Latest commit

 

History

History
146 lines (115 loc) · 5.86 KB

README.md

File metadata and controls

146 lines (115 loc) · 5.86 KB
Raw

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 **

Date Author Description
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
2015-10-19 benletchford Fixed not being able to tab into input
2015-10-19 drblue Fixed erroneous package.json-file
2015-10-19 Perdona Fix auto resize when month has 6 weeks
2015-07-01 T00rk Redesigned element without using modal
2015-06-16 T00rk Use Timepicker alone / Display short time (12 hours)
2015-06-13 T00rk Fixed issue with HTML value tag
2015-05-25 T00rk Changed repo name to bootstrap-material-datetimepicker *
2015-05-12 T00rk Added parameters for button text
2015-05-05 Sovanna FIX undefined _minDate in isBeforeMaxDate func
2015-04-10 T00rk Little change in clock design
2015-04-10 Peterzen Added bower and requirejs support
2015-04-08 T00rk Fixed problem on locale switch
2015-03-04 T00rk Added 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:

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
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)
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)

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.