Angularjs Moment Picker : Angularjs Date & Time Picker

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="//"></script>
<script src="vendor/angular-moment-picker/angular-moment-picker.min.js"></script>
<script src="//"></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 }}
<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 }}.
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 }}.
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) {
/* add code hear */

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  83  =  91

We accept paid advance and paid guest Posting on our Site : Contact US