AngularJs directive to use a date and/or time picker as a dropdown from an input.

Чтобы использовать директиву, у вас должны быть уже включены следующие директивы angular-ui

• DatePicker
• TimePicker

У вас уже должна быть зависимость ui.bootstrap, включенная в ваш файл app.js, как показано ниже. Затем вам нужно добавить ui.bootstrap.datetimepicker

angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

Загрузите исходный код из файла dist / datetime-picker.min.js и включите его в свой проект.
Или используйте Bower

bower install --save bootstrap-ui-datetime-picker

и ссылка на ``bower_components / bootstrap-ui-datetime-picker / dist / datetime-picker.min.js``

У вас есть следующие свойства, доступные для использования с директивой. Все они являются необязательными

• ngModel (required) - Your date object
• isOpen - (true/false)
• closeOnDateSelection (true/false)
• closeOnTimeNow (true/false)
• enableDate (true/false)
• enableTime (true/false)
• buttonBar (object)
• initialPicker ('date'/'time')
• reOpenDefault (false/'date'/'time') - NOTE: true not supported
• datepickerOptions (object)
• timepickerOptions (object)
• defaultTime (string)
• saveAs (boolean|function|'ISO'|'json'|'number')
• readAs (boolean|function)

Отображается ли всплывающее / раскрывающееся меню. По умолчанию false

Закройте всплывающее окно после выбора даты. TimePicker будет оставаться открытым, пока пользователь не закроет.

Закройте всплывающее окно после того, как время было выбрано.

Хотите ли вы, чтобы пользователь мог выбрать дату. По умолчанию true

Хотите ли вы, чтобы пользователь мог выбрать время. По умолчанию true

Чтобы показать или скрыть панель кнопок или любую из кнопок внутри нее. По умолчанию используется uiDatetimePickerConfig. Укажите только те элементы, которые вы хотите переопределить, поскольку каждая кнопка по умолчанию соответствует настройке uiDatetimePickerConfig, если она не настроена в области datetimePicker

Первоначальное средство выбора, открывающееся при первом нажатии элемента управления

Средство выбора, которое следует установить в качестве средства выбора, которое будет открываться после того, как элемент управления уже был открыт хотя бы один раз. Значение false по умолчанию будет использовать средство выбора даты, если включены и дата, и время, или только включенный элемент управления, если используются только время или дата.

Объект для настройки параметров datepicker(можно найти на сайте angularUI)

Объект для настройки параметров для timepicker (можно найти на сайте angularUI)

Начальное время при выборе новой даты (например, «14: 00: 00» или «14:00»)

Функция обратного вызова, вызываемая при закрытии раскрывающегося списка средства выбора. См. Демонстрацию для более подробной информации.

Логическое значение для переключения сохранения даты в модель в виде строки или функция ngModel. $ Parsers для преобразования объекта Date в строку. Возможные значения:

• true
• false
• 'ISO' (Date.toISOString())
• 'json' (Date.toJSON())
• 'number' (Date.valueOf())
• функция, принимающая параметр значения и возвращающая преобразованное значение для сохранения в модели. Примечание. Если используется тип ввода html5, синтаксический анализатор по умолчанию будет использовать Date.toLocaleString () для преобразования в строку. Чтобы переопределить это, предоставьте функцию с желаемым форматированным преобразованием. В противном случае все остальные типы ввода будут использовать предоставленный формат даты.

Логическое значение для преобразования строкового (или Date.valueOf ()) значения обратно в объект Date из ngModel или функции ngModel. $ Formatters для полного выполнения преобразования.

Теперь параметры datetimePicker глобально установлены по умолчанию. Если вы не укажете значения в объявлении, вместо этого используются параметры конфигурации. Вот параметры по умолчанию

.constant('uiDatetimePickerConfig', {
    dateFormat: 'yyyy-MM-dd HH:mm',
    defaultTime: '00:00:00',
    html5Types: {
        date: 'yyyy-MM-dd',
        'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
        'month': 'yyyy-MM'
    },
    initialPicker: 'date',
    reOpenDefault: false,
    enableDate: true,
    enableTime: true,
    buttonBar: {
        show: true,
        now: {
            show: true,
            text: 'Now',
            cls: 'btn-sm btn-default'
        },
        today: {
            show: true,
            text: 'Today',
            cls: 'btn-sm btn-default'
        },
        clear: {
            show: true,
            text: 'Clear',
            cls: 'btn-sm btn-default'
        },
        date: {
            show: true,
            text: 'Date',
            cls: 'btn-sm btn-default'
        },
        time: {
            show: true,
            text: 'Time',
            cls: 'btn-sm btn-default'
        },
        close: {
            show: true,
            text: 'Close',
            cls: 'btn-sm btn-default'
        },
        cancel: {
            show: false,
            text: 'Cancel',
            cls: 'btn-sm btn-default'
        }
    },
    closeOnDateSelection: true,
    closeOnTimeNow: true,
    appendToBody: false,
    altInputFormats: [],
    ngModelOptions: {},
    saveAs: false,
    readAs: false
})

Лично мне не нравится внешний вид самого календаря angular-ui, потому что кнопки настроены на использование стиля btn-default. Чтобы обойти это, к средству выбора даты и времени применяются 3 класса css, которые зависят от отображаемого средства выбора. Эти классы окружают элемент div, который содержит datepicker и timepicker angular -ui. Используя эти классы, вы можете изменить стиль календаря.

.datetime-picker-dropdown

Применяется к раскрывающемуся списку, в котором находятся средства выбора.

.datetime-picker-dropdown > li.date-picker-menu

Применяется, когда виден выбор даты

.datetime-picker-dropdown > li.time-picker-menu

Применяется, когда отображается окно выбора времени. Кнопки в buttonBars можно переопределить, установив классы css, как указано выше.

Например, если я добавлю этот код css, вы увидите разницу с календарем на изображениях ниже.

.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default {
    border: 0;
}

Вот пример использования директивы с вводом начальной загрузки, отображающим кнопку календаря.

HTML

<p class="input-group">
    <input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="myDate" is-open="isOpen"  />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openCalendar($event, prop)"><i class="fa fa-calendar"></i></button>
    </span>
</p>

JAVASCRIPT

app.controller('MyController', function() {
    var that = this;
 
    this.isOpen = false;
 
    this.openCalendar = function(e) {
        e.preventDefault();
        e.stopPropagation();
 
        that.isOpen = true;
    };
});