===== Gillardo / bootstrap-ui-datetime-picker =====

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

<code javascript>
angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);
</code>

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

<code javascript>
bower install --save bootstrap-ui-datetime-picker
</code>

и ссылка на ``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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<code javascript>
.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
})
</code>

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

<code css>
.datetime-picker-dropdown
</code>

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

<code css>
.datetime-picker-dropdown > li.date-picker-menu
</code>

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

<code css>
.datetime-picker-dropdown > li.time-picker-menu
</code>

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

===EXAMPLE===

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

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


====Example====

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

**HTML**
<code 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>
</code>

**JAVASCRIPT**

<code javascript>
app.controller('MyController', function() {
    var that = this;

    this.isOpen = false;

    this.openCalendar = function(e) {
        e.preventDefault();
        e.stopPropagation();

        that.isOpen = true;
    };
});
</code>