Angular Moment Picker

Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js

Why?

It was crazy for me to see that there are so many jQuery plugins for date and time picker and so few AngularJS directives doing the same in the same way, none of them using Moment.js (let's say, Moment.js is unique!).

The question is Why?, I thought it's not so hard!.

That's why I decided to create Angular Moment Picker, an easy to use datetime picker that does not requires jQuery and uses the powerful Moment.js to perform Internationalization (i18n) and all the operations on dates.

Easy to use. Easy to install.

  {{ ctrl.today || 'Click here to select a date' }}
<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="vendor/angular-moment-picker/angular-moment-picker.min.js"></script>
<link href="vendor/angular-moment-picker/angular-moment-picker.min.css" rel="stylesheet">
var myApp = angular.module('myApp', ['moment-picker']);

Use it everywhere. Attached to a component or to an input.

{{ctrl.component || 'Click here to select a date'}}
<span moment-picker="ctrl.component">
    {{ ctrl.component || 'Click here to select a date' }}
</span>
<input class="form-control"
       ng-model="ctrl.input"
       ng-model-options="{ updateOn: 'blur' }"
       placeholder="Select a date..."
       moment-picker="ctrl.input">

Smart min/max view detection. Write less, do more (cit.)

<div class="input-group"
     moment-picker="ctrl.datepicker"
     format="YYYY-MM-DD">
    <span class="input-group-addon">
        <i class="octicon octicon-calendar"></i>
    </span>
    <input class="form-control"
           placeholder="Select a date"
           ng-model="ctrl.datepicker"
           ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="input-group"
     moment-picker="ctrl.timepicker"
     format="HH:mm:ss">
    <span class="input-group-addon">
        <i class="octicon octicon-clock"></i>
    </span>
    <input class="form-control"
           placeholder="Select a time"
           ng-model="ctrl.timepicker"
           ng-model-options="{ updateOn: 'blur' }">
</div>

Choose your locale. Thanks to Moment.js.

<div moment-picker="ctrl.locale" locale="en"> English </div>

Builder. You have no excuses now!

Check out all available options in the official documentation.

  {{ ctrl.myInput }}   {{ ctrl.myInput }}

Be careful when using min/max view properties, they will be overridden by the smart view auto-detection if the format selected does not require a specific view (i.e. format HH:mm doesn't require decade, year, month, and minute views).

<div moment-picker="ctrl.myInput"
     locale="{{ctrl.builder.locale | encoded}}"
     format="{{ctrl.builder.format | encoded}}"
     min-view="{{ctrl.builder.minView | encoded}}"
     max-view="{{ctrl.builder.maxView | encoded}}"
     start-view="{{ctrl.builder.startView | encoded}}"
     min-date="'{{ctrl.builder.minDate | encoded}}'"
     max-date="'{{ctrl.builder.maxDate | encoded}}'"
     disable="{{ctrl.builder.disable}}"
     autoclose="{{ctrl.builder.autoclose}}"
     is-open="{{ctrl.builder.isOpen}}"
     today="{{ctrl.builder.today}}"
     keyboard="{{ctrl.builder.keyboard}}"
     inline="true"
     set-on-select="{{ctrl.builder.setOnSelect}}"
     show-header="{{ctrl.builder.showHeader}}">
    {{ ctrl.myInput }}
</div>

MomentPickerProvider. Set a default configuration for all the pickers.

Check out all available options in the official documentation.

angular
    .module('myApp', ['moment-picker'])
    .config(['momentPickerProvider', function (momentPickerProvider) {
        momentPickerProvider.options({
            /* Picker properties */
            locale:        'en',
            format:        'L LTS',
            minView:       'decade',
            maxView:       'minute',
            startView:     'year',
            autoclose:     true,
            today:         false,
            keyboard:      false,
            
            /* Extra: Views properties */
            leftArrow:     '&larr;',
            rightArrow:    '&rarr;',
            yearsFormat:   'YYYY',
            monthsFormat:  'MMM',
            daysFormat:    'D',
            hoursFormat:   'HH:[00]',
            minutesFormat: moment.localeData().longDateFormat('LT').replace(/[aA]/, ''),
            secondsFormat: 'ss',
            minutesStep:   5,
            secondsStep:   1
        });
    }]);
Fork me on GitHub