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;
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:
Timepicker Only
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
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 =mdcDatetimePickerDefaultLocalelocale 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