47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
# Двойной календарь со стрелками
|
||
|
||
[importance 5]
|
||
|
||
Создайте календарь, который показывает два месяца сразу. Стрелки позволяют менять текущий месяц.
|
||
|
||
Конструктор:
|
||
|
||
```js
|
||
var datePicker = new DatePicker({
|
||
template: HTML-шаблон,
|
||
value: Date или объект {year, month, day}
|
||
});
|
||
```
|
||
|
||
Если значение `value` передано в виде объекта `{year, month}`, т.е. без `day`, то дата не выбрана.
|
||
|
||
События:
|
||
<ul>
|
||
<li>`select` -- при изменении даты.</li>
|
||
</ul>
|
||
Методы:
|
||
<ul>
|
||
<li>`setValue(date, quiet)` -- устанавливает значение даты, формат -- как в конструкторе. Если второй аргумент `true`, то событие не генерируется.</li>
|
||
<li>`getElement()` -- возвращает DOM-элемент для компоненты для вставки в документ. При первом вызове создаёт DOM.</li>
|
||
</ul>
|
||
|
||
Использование -- добавление в документ:
|
||
|
||
```js
|
||
$('body').append(datePicker.getElement());
|
||
```
|
||
|
||
Использование - подписка на изменение и вывод значения:
|
||
|
||
```js
|
||
$(datePicker).on("select", function(e) {
|
||
$('#value').html( e.value + '' );
|
||
});
|
||
```
|
||
|
||
Пример в действии:
|
||
[iframe border=1 src="solution"]
|
||
|
||
|
||
|
||
**В решении используйте готовый компонент -- календарь из задачи [](/task/calendar).**
|