Angular Moment Picker

Easy to use. Easy to install.

<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.

<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.

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:     '←',
            rightArrow:    '→',
            yearsFormat:   'YYYY',
            monthsFormat:  'MMM',
            daysFormat:    'D',
            hoursFormat:   'HH:[00]',
            minutesFormat: moment.localeData().longDateFormat('LT').replace(/[aA]/, ''),
            secondsFormat: 'ss',
            minutesStep:   5,
            secondsStep:   1
        });
    }]);