indrimuska / angular-moment-picker

Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
http://indrimuska.github.io/angular-moment-picker/
MIT License
527 stars 229 forks source link

Is there a way to pass in an options object? #279

Open blitzmann opened 5 years ago

blitzmann commented 5 years ago

Hi there!

We have a need to define various options for our date pickers, and want to be able to apply these options on the element without having to manually edit each one. I know of the global provider for setting options, but this sets it globally for all datepickers within the application. Is there a way to set up options and then pass that into the element, so that all of the elements that need those options can get it from one source?

eg:

angular
  .module('Test', ['moment-picker'])
  .controller('TestController', ['$scope', function () {
    var ctrl = this;
    ctrl.datePickerOptions = {
        /* 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
    }
  }]);
<input class="form-control" moment-picker="ctrl.date1" options="ctrl.datePickerOptions">
<input class="form-control" moment-picker="ctrl.date2" options="ctrl.datePickerOptions">
<input class="form-control" moment-picker="ctrl.date3" options="ctrl.datePickerOptions">
<input class="form-control" moment-picker="ctrl.date4" options="ctrl.datePickerOptions">

<input class="form-control" moment-picker="ctrl.diffrentDate1">
<input class="form-control" moment-picker="ctrl.diffrentDate2">

In this example, we have 6 date pickers. the first four get their options from the options object, while the last two are plain vanilla datepickers with no customization.

I'm aware we could have a global configuration and the tweak at the element level, but that seem too overreaching. I'm also aware that we could have all the options set on each element, but that's too limited (we want first four to always remain the same and use the same options, don't want chance of dsync). I feel there should be a middle layer between global / local customization where you can give it the options. Is this possible in the current implementation?