Angularjs Moment Picker : Angularjs Date & Time Picker

In this post we will show you how to use Angularjs Moment Picker for date and time in Angularjs usth simple and easy code.

Angular Moment Picker is a AngularJS native directive for picker date and time that usesdoes not require jQuery and Moment.js.

View DemoGit Code

It such a large amount of jQuery plugins for date and time picker so few AngularJS directives doing identical within the same means, none of them using Moment.js.

<link href="vendor/angular-moment-picker/angular-moment-picker.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="vendor/angular-moment-picker/angular-moment-picker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>

Add Angularjs Moment Picker for over module

// assign app
var myAppMoment = angular.module('myAppMoment', ['moment-picker']);

Provide attribute for over element

<div moment-picker="myAppMoment"> {{ myAppMoment }} </div>

Options for Angularjs Moment Picker

To configure Angular Moment Picker you have to append to your block or your input the attribute options you want to set.

<div format="LL" locale="fr" moment-picker="ctrl.birthday"  >
    Mon anniversaire est le {{ ctrl.birthday }}
</div>
<input moment-picker="ctrl.dateFormatted" format="DD/MM/YYYY" ng-model="ctrl.momentDate">

Angularjs Moment Picker Methods

Append over method to over element and define it’s behavior in controller.

<div moment-picker="ctrl.exhibition" format="dddd D MMMM" selectable="ctrl.isSelectable(date, type)">
    Next exhibition is on {{ ctrl.exhibition }}.
</div>
ctrl.isSelectable = function (date, type) {
    // Month View for disable all mondays
    return type != 'day' || date.format('dddd') != 'Monday';
};

Moment Picker Events

As for methods, to bind an event we only need to attach right property to over picker.

<!-- add newVal and oldval-->
<div format="HH:mm A"  change="ctrl.onChange(newVal, oldVal)" moment-picker="ctrl.meeting" >
    meeting starts at => {{ ctrl.meeting }}.
</div>
ctrl.onChange = function (newVal, oldVal) {
    $log.log('Meeting chang from ' + oldVal + ' to ' + newVal);
};


<h2>Moment Picker moment-Picker-Provider</h2>

Angular Moment Picker is comes out with it's own provider, in order to define over own configuration for all pickers in over app.


.module('myApp', ['moment-picker'])
.config(['momentPickerProvider', function (momentPickerProvider) {
	momentPickerProvider.options({
		/* add code hear */
	});
}]);