Check out the homepage at http://indrimuska.github.io/angular-moment-picker/.
Angular Moment Picker is a native AngularJS directive for date and time picker that uses Moment.js and does not require jQuery.
Get Angular Moment Picker from npm, bower or git:
npm install angular-moment-picker
bower install moment-picker
git clone https://github.com/indrimuska/angular-moment-picker.git
Include style and script in your page:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.js"></script>
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">
Add moment-picker dependency to your module:
var myApp = angular.module('myApp', ['moment-picker']);
Provide the attribute to your element:
<div moment-picker="myDate"> {{ myDate }} </div>
Check out the demo page at http://indrimuska.github.io/angular-moment-picker/.
Decade view | Year view | Month view |
---|---|---|
Day view | Hour view | Minute view |
To configure Angular Moment Picker you have to append to your block or your input the attribute options you want to set.
<div moment-picker="ctrl.birthday" locale="fr" format="LL">
Mon anniversaire est le {{ ctrl.birthday }}
</div>
Property | Default | Description |
---|---|---|
moment-picker | Two-way bindable model property, required to use the directive. | |
locale | "en" |
Locale code. 1 |
format | "L LTS" |
Format of the output value and min/max date. 1 |
min-view | "decade" |
Minimum navigable view. |
max-view | "minute" |
Maximum navigable view. |
start-view | "year" |
Initial view when the picker is open. |
min-date | Two-way bindable property representing the minimum selectable date in the same format of the value. | |
max-date | Two-way bindable property representing the maximum selectable date in the same format of the value. | |
today | false |
Highlights the current day. |
disable | false |
Disables the picker if truly. |
autoclose | true |
Closes the picker after selecting a date. |
As for the options, to bind an event you only need to append the right property to your picker.
<div moment-picker="ctrl.meeting" format="HH:mm A" change="ctrl.onChange(newValue, oldValue)">
The meeting starts at {{ ctrl.meeting }}.
</div>
Event | Parameters | Description |
---|---|---|
change | newValue , oldValue |
Function fired upon change in picker value. |
Angular Moment Picker comes out with its own provider, in order to define your own configuration for all the pickers in your app.
angular
.module('myApp', ['moment-picker'])
.config(['momentPickerProvider', function (momentPickerProvider) {
momentPickerProvider.options({
/* ... */
});
}]);
Property | Default | Description |
---|---|---|
locale | "en" |
Locale code. 1 |
format | "L LTS" |
Format of the output value and min/max date. 1 |
min-view | "decade" |
Minimum navigable view. |
max-view | "minute" |
Maximum navigable view. |
start-view | "year" |
Initial view after picker opening. |
today | false |
Highlights the current day. |
autoclose | true |
Closes the picker after selecting a date. |
left-arrow | "←" |
Left arrow string (HTML allowed). |
right-arrow | "→" |
Right arrow string (HTML allowed). |
yearsFormat | "YYYY" |
Years format in decade view. |
months-format | "MMM" |
Months format in year view. |
days-format | "D" |
Days format in month view. |
hours-format | "HH:[00]" |
Hours format in day view. |
minutes-format | 2 | Minutes format in hour view. |
minutes-step | 5 |
Step between each visible minute in hour view. |
seconds-format | "ss" |
Seconds format in minute view. |
seconds-step | 1 |
Step between each visible second in minute view. |
- Locale codes and format tokens are available at http://momentjs.com/.
- Locale format
LT
without meridiem part (AM/PM, am/pm).
Try the online Angular Moment Picker Builder:
http://indrimuska.github.io/angular-moment-picker/#builder.
Copyright (c) 2015 Indri Muska. Licensed under the MIT license.