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
| Date | Author | Description |
|---|---|---|
| 2018-06-15 | hexadecy | Can hide Today button |
| 2018-02-09 | hexadecy | support ng-model-options timezone |
| 2018-01-29 | coennijhuis | min-date max-date validation when not using the picker |
| 2017-10-18 | paragraff | custom template |
| 2017-09-11 | hexadecy | show-icon button with edit-input mode |
| 2017-08-19 | hexadecy | Quick year and month menu selector |
| 2017-08-12 | hexadecy | Add optionnal seconds clock |
| 2017-07-30 | hexadecy | Highlight only week-days (business days) |
| 2017-07-22 | hexadecy | Mouse or touch move to select time, minute steps param |
| 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 for angular 1.6.x |
| 2015-11-12 | logbon72 | Adapted plugin for Angular Material |
Depends on the following library:
- AngularJS Material
- AngularJS Animate
- AngularJS Aria
- AngularJS
- Moment
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-aria.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.20/angular-material.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.20/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
yarn add ng-material-datetimepicker
npm i ng-material-datetimepicker
bower install ng-material-datetimepicker
<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">
Click here to see live examples.
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>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) |
| seconds | Boolean | true => Has Timepicker seconds (default: false) |
| cancel-text | String | Text for the cancel button (default: Cancel) |
| am-text | String | Text for the ante meridiem (default: AM) |
| pm-text | String | Text for the post meridiem (default: PM) |
| today-btn | Boolean | true => Show today button (default: true) |
| 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 |
| week-days | Boolean | true => Highlight only week-days (default: false) |
| show-todays-date | Attribute | Show today's date (default: false) |
| disable-parent-scroll | Boolean | true => Disable scrolling while the dialog is open (default : false) |
| auto-ok | Boolean | true => Single click (default: false) |
| edit-input | Boolean | true => Input editable and don't show dialog (default: false) |
| click-outside-to-close | Boolean | true => A click outside close the dialog (default: false) |
| minute-steps | Number | 1 to 59 minute steps (default: 5) |
| show-icon | Boolean | true => Show calendar or time icon before (default: false) |
| show-clear | Boolean | true => clear (default: true if show-icon) |
| template-url | String | You can set a custom HTML template (default: '') |
| ng-model-options | timezone option | For example: ng-model-options="{timezone: 'utc'}" |
| day-of-week-len | Number | Day of the week length (default: 1 => S) Possible value 0-3 |
| has-backdrop | Boolean | true => Has Backdrop (default: true) |
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.
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});If you use https://github.com/lgalfaso/angular-dynamic-locale it will always override the locale.
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
}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;
}To run the demo:
npm start
yarn start
gulp serve
To build with gulp 4:
Global
gulp
Local
./node_modules/.bin/gulp