1.20.0 • Published 1 year ago

ng-material-datetimepicker v1.20.0

Weekly downloads
3,305
License
-
Repository
github
Last release
1 year ago

Known Vulnerabilities npm version Open Source Love dependencies Status devDependencies Status PRs Welcome

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
  • Mouse click down with mouse move or touch move to select time
  • Swipe left to go to next month or Swipe right to go to previous month
  • Quick year and month menu selector
  • Configurable first day of the week
  • Support 24-hour format display
  • Can disable dates, not selectable by user
  • Highlight Week days (Business Days)
  • Can disable minutes view
  • 1 to 59 minute steps (normally 1, 5, 10, 15)
  • Optionnal seconds clock
  • Compatible with right-to-left direction
  • Support RequireJS and Webpack
  • Possibility to set a custom external template
  • Support moment utc or ng-model-options timezone

Updates

DateAuthorDescription
2018-06-15hexadecyCan hide Today button
2018-02-09hexadecysupport ng-model-options timezone
2018-01-29coennijhuismin-date max-date validation when not using the picker
2017-10-18paragraffcustom template
2017-09-11hexadecyshow-icon button with edit-input mode
2017-08-19hexadecyQuick year and month menu selector
2017-08-12hexadecyAdd optionnal seconds clock
2017-07-30hexadecyHighlight only week-days (business days)
2017-07-22hexadecyMouse or touch move to select time, minute steps param
2017-04-26hexadecyNew 24-hour clock face
2017-04-17hexadecySingle click to select
2017-02-27hexadecyCan hide minutes view, Month next and prev buttons
2017-02-22hexadecyFix for rtl website
2017-02-15hexadecyFix inputs are not bluring after selection is made
2017-01-30hexadecyAdd support for angular 1.6.x
2015-11-12logbon72Adapted plugin for Angular Material

Dependencies

Depends on the following library:

  • AngularJS Material
  • AngularJS Animate
  • AngularJS Aria
  • AngularJS
  • Moment
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-aria.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.3/angular-material.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.2.3/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>

Installing with yarn or npm

yarn add ng-material-datetimepicker
npm i ng-material-datetimepicker

CDN

<script src="https://unpkg.com/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js"></script>
<script src="https://unpkg.com/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js.map"></script>
<link href="https://unpkg.com/ng-material-datetimepicker/dist/material-datetimepicker.min.css rel="stylesheet" type="text/css">

or

<script src="https://cdn.jsdelivr.net/npm/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js.map"></script>
<link href="https://cdn.jsdelivr.net/npm/ng-material-datetimepicker/dist/material-datetimepicker.min.css" rel="stylesheet" type="text/css">

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 click-outside-to-close="true"
               placeholder="Time" auto-ok="true"
               min-date="minDate" minute-steps="1"
               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|MomentInitial 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 (default: false)
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)
minutesBooleantrue => Has Timepicker minutes (default: true)
secondsBooleantrue => Has Timepicker seconds (default: false)
cancel-textStringText for the cancel button (default: Cancel)
am-textStringText for the ante meridiem (default: AM)
pm-textStringText for the post meridiem (default: PM)
today-btnBooleantrue => Show today button (default: true)
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)
disable-datesDate[]Dates to be disabled or not selectable by user
week-daysBooleantrue => Highlight only week-days (default: false)
show-todays-dateAttributeShow today's date (default: false)
disable-parent-scrollBooleantrue => Disable scrolling while the dialog is open (default : false)
auto-okBooleantrue => Single click (default: false)
edit-inputBooleantrue => Input editable and don't show dialog (default: false)
click-outside-to-closeBooleantrue => A click outside close the dialog (default: false)
minute-stepsNumber1 to 59 minute steps (default: 5)
show-iconBooleantrue => Show calendar or time icon before (default: false)
show-clearBooleantrue => clear (default: true if show-icon)
template-urlStringYou can set a custom HTML template (default: '')
ng-model-optionstimezone optionFor example: ng-model-options="{timezone: 'utc'}"
day-of-week-lenNumberDay of the week length (default: 1 => S) Possible value 0-3
has-backdropBooleantrue => Has Backdrop (default: true)

UTC Time Zone

You should normally use the browser local time zone and use UTC only on the server side. But if you have special case, you can set the model to a moment.utc() and it will stay a moment utc object. You can also use the format="YYYY-MM-DD HH:mmZ" for parsing if your server returns an UTC date time. Also, if you want your user to manually enter an UTC time use the ng-model-options timezone as in the demo.

Set or update params by injecting mdcDefaultParams provider

To change params like the locale you can use this method instead of attributes for all datetimepicker:

  mdcDefaultParams({lang: 'fr', cancelText: 'annuler', todayText: 'maintenant', okText: 'ok', dayOfWeekLen: 3});
  ...
  mdcDefaultParams({lang: 'en', cancelText: 'cancel', todayText: 'now', okText: 'ok', dayOfWeekLen: 3});

Notes

If you use https://github.com/lgalfaso/angular-dynamic-locale it will always override the locale.

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 almost the same options as the directive.

     {
       date: {boolean} =true,
       time: {boolean} =true,
       minutes: {boolean} =true,
       seconds: {boolean} =true,
       format: {string} ='YYYY-MM-DD',
       minDate: {strign} =null,
       maxDate: {string} =null,
       currentDate: {string} =null,
       lang: {string} =window.navigator.userLanguage || window.navigator.language || 'en',
       weekStart: {int} =0,
       shortTime: {boolean} =false,
       cancelText: {string} ='Cancel',
       todayBtn: {boolean} =true,
       todayText: {string} ='Today',
       showTodaysDate: {string} ='',
       okText: {string} ='OK',
       amText: {string} ='AM',
       pmText: {string} ='PM',
       disableDates: {date[]} =[],
       weekDays: {boolean} =false,
       disableParentScroll: {boolean} =false,
       autoOk: {boolean} =false,
       editInput: {boolean} =false,
       clickOutsideToClose: {boolean} =false,
       minuteSteps: {int} =5,
       showIcon: {boolean} =false,
       showClear: {boolean} =true,
       templateUrl: {string} =''
       targetEvent: {DOMClickEvent}=null,
       openFrom: {string|Element|object}=null,
       closeTo: {string|Element|object}=null,
       dayOfWeekLen: {int} =1,
       hasBackdrop: {boolean} =true
     }

Theming

Copy this css code in your project to override default color.

.dtp table.dtp-picker-days tr > td > a.selected,
.dtp table.dtp-picker-days tr > td > a.selected.hilite,
.dtp div.dtp-date, .dtp div.dtp-time, .dtp .dtp-hand.on,
.dtp .dtp-actual-meridien a.selected,
.dtp .dtp-picker-time > a.dtp-select-hour.selected {
  background: #2abab9;
}

.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected),
.dtp div.dtp-actual-time.p60 span.selected {
  color: #2abab9;
}

.dtp div.dtp-year-btn, .dtp div.dtp-actual-year, .dtp div.dtp-actual-maxtime {
  color: #d0f0f0;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
  background: #009796;
}

md-menu-content.dtp-month-list {
  background-color: #d0f0f0;
}

md-menu-content.dtp-year-list {
  background-color: #d0f0f0;
}

Development

To run the demo:

yarn start

To build with esbuild:

yarn build
1.20.0

1 year ago

1.19.8

3 years ago

1.19.7

3 years ago

1.19.6

4 years ago

1.19.5

4 years ago

1.19.4

4 years ago

1.19.3

4 years ago

1.19.2

5 years ago

1.19.1

5 years ago

1.19.0

5 years ago

1.18.6

5 years ago

1.18.5

5 years ago

1.18.3

5 years ago

1.18.2

5 years ago

1.18.1

5 years ago

1.18.0

5 years ago

1.17.2

5 years ago

1.12.1

5 years ago

1.17.1

5 years ago

1.17.0

6 years ago

1.16.1

6 years ago

1.16.0

6 years ago

1.15.2

6 years ago

1.15.1

6 years ago

1.15.0

6 years ago

1.14.0

6 years ago

1.13.3

6 years ago

1.13.2

6 years ago

1.13.1

6 years ago

1.13.0

6 years ago

1.12.0

6 years ago

1.11.0

6 years ago

1.10.0

6 years ago

1.9.7

6 years ago

1.9.6

6 years ago

1.9.5

6 years ago

1.9.4

7 years ago

1.9.3

7 years ago

1.9.2

7 years ago

1.9.1

7 years ago

1.9.0

7 years ago

1.8.7

7 years ago

1.8.6

7 years ago

1.8.5

7 years ago

1.8.4

7 years ago

1.8.3

7 years ago

1.8.2

7 years ago

1.8.1

7 years ago

1.8.0

7 years ago

1.7.2

7 years ago

1.7.1

7 years ago

1.7.0

7 years ago

1.6.7

7 years ago

1.6.6

7 years ago

1.6.5

7 years ago

1.6.4

7 years ago

1.6.3

7 years ago

1.6.2

7 years ago

1.6.1

7 years ago

1.6.0

7 years ago

1.5.12

7 years ago

1.5.11

7 years ago

1.5.10

7 years ago

1.5.9

7 years ago

1.5.8

7 years ago

1.5.7

7 years ago

1.5.6

7 years ago

1.5.5

7 years ago

1.5.4

7 years ago

1.5.3

7 years ago

1.5.2

7 years ago

1.5.1

7 years ago

1.5.0

7 years ago