mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
update input value then call update(), begin timepicker docs
This commit is contained in:
t1m0n
parent
d11bac1708
commit
61d7ff7da8
31
dist/js/datepicker.js
vendored
31
dist/js/datepicker.js
vendored
@ -160,23 +160,23 @@ var Datepicker;
|
||||
}
|
||||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||||
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
|
||||
this.$el.on('clickCell.adp', this._onClickCell.bind(this));
|
||||
}
|
||||
|
||||
if (this.opts.classes) {
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker = new Datepicker.Timepicker(this, this.opts);
|
||||
this._bindTimepickerEvents();
|
||||
}
|
||||
|
||||
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
|
||||
this.views[this.currentView].show();
|
||||
this.nav = new Datepicker.Navigation(this, this.opts);
|
||||
this.view = this.currentView;
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker = new Datepicker.Timepicker(this, this.opts);
|
||||
this._bindTimepickerEvents();
|
||||
}
|
||||
|
||||
this.$el.on('clickCell.adp', this._onClickCell.bind(this));
|
||||
this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
|
||||
this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
|
||||
|
||||
@ -564,6 +564,7 @@ var Datepicker;
|
||||
*/
|
||||
update: function (param, value) {
|
||||
var len = arguments.length;
|
||||
|
||||
if (len == 2) {
|
||||
this.opts[param] = value;
|
||||
} else if (len == 1 && typeof param == 'object') {
|
||||
@ -591,9 +592,16 @@ var Datepicker;
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker._handleDate(this.lastSelectedDate);
|
||||
this.timepicker._updateRanges();
|
||||
this.timepicker._updateCurrentTime()
|
||||
this.timepicker._updateCurrentTime();
|
||||
// Change hours and minutes if it's values have been changed through min/max hours/minutes
|
||||
if (this.lastSelectedDate) {
|
||||
this.lastSelectedDate.setHours(this.timepicker.hours);
|
||||
this.lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
}
|
||||
|
||||
this._setInputValue();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -1158,7 +1166,9 @@ var Datepicker;
|
||||
this.selectDate(date);
|
||||
} else {
|
||||
this._setInputValue();
|
||||
this._triggerOnChange();
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1912,7 +1922,7 @@ var Datepicker;
|
||||
hourMin: this.minHours,
|
||||
hourMax: lz(this.maxHours),
|
||||
hourStep: this.opts.hoursStep,
|
||||
hourValue: lz(this.hours),
|
||||
hourValue: lz(this.displayHours),
|
||||
minMin: this.minMinutes,
|
||||
minMax: lz(this.maxMinutes),
|
||||
minStep: this.opts.minutesStep,
|
||||
@ -1929,7 +1939,8 @@ var Datepicker;
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm = $('<span class="datepicker--time-current-ampm">')
|
||||
.appendTo($('.datepicker--time-current', this.$timepicker));
|
||||
.appendTo($('.datepicker--time-current', this.$timepicker))
|
||||
.html(this.dayPeriod)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
4
dist/js/datepicker.min.js
vendored
4
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,10 +1,10 @@
|
||||
mixin param-header(name, type, defaults)
|
||||
mixin param-header(name, type, defaults, id)
|
||||
-var typeLabel = 'Тип';
|
||||
-var defaultLabel = 'Значение по умолчанию';
|
||||
-if (lang == 'en') {typeLabel = 'Type'; defaultLabel = 'Defaults'};
|
||||
|
||||
header.param-header
|
||||
h3= name
|
||||
h3(id = id)= name
|
||||
if type
|
||||
p.param-header--row
|
||||
span.param-header--label= typeLabel
|
||||
|
||||
@ -277,6 +277,143 @@ block content
|
||||
var currentDate = currentDate = new Date();
|
||||
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
|
||||
|
||||
article
|
||||
h2#timepicker Выбор времени
|
||||
p Для выбора времени используйте опцию
|
||||
+example-inline('{timepicker: true}', 'js')
|
||||
| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
|
||||
+example
|
||||
+example-content
|
||||
div.datepicker-here(data-timepicker='true')
|
||||
+example-code
|
||||
:code
|
||||
<div class="datepicker-here" data-timepicker="true"></div>
|
||||
p
|
||||
i Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker'>Опциях</a>.
|
||||
|
||||
|
||||
h3#timepicker-format Формат времени
|
||||
p Формат времени задается в объекте локализации, либо в парамтре
|
||||
+example-inline('timeFormat', 'js')
|
||||
|. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
|
||||
+example-inline('timeFormat', 'js')
|
||||
| нужно добавить символ
|
||||
+example-inline('aa', 'js')
|
||||
| или
|
||||
+example-inline('AA', 'js')
|
||||
| . После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
input(type='text').datepicker-here(data-timepicker='true', data-time-format='hh:ii aa')
|
||||
+example-code
|
||||
:code
|
||||
<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
|
||||
|
||||
h3#timeformat-actions Действия со временем
|
||||
p Для задания максимально/минимально возможных значений часов или минут используйте параметры
|
||||
+example-inline('maxHours','js')
|
||||
|,
|
||||
+example-inline('minHours','js')
|
||||
|,
|
||||
+example-inline('maxMinutes','js')
|
||||
|,
|
||||
+example-inline('minMinutes','js')
|
||||
|. Также время можно указывать в парамтерах
|
||||
+example-inline('minDate','js')
|
||||
| и
|
||||
+example-inline('maxDate','js')
|
||||
p Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
input(type='text')#timepicker-actions-exmpl
|
||||
script.
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
start.setHours(9);
|
||||
start.setMinutes(0);
|
||||
|
||||
// Если сегодня суббота или воскресенье - 10:00
|
||||
if ([6,0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
|
||||
$('#timepicker-actions-exmpl').datepicker({
|
||||
timepicker: true,
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function(fd, d, picker) {
|
||||
// Ничего не делаем если выделение было снято
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
picker.update({
|
||||
minHours: 10,
|
||||
maxHours: 16
|
||||
})
|
||||
} else {
|
||||
picker.update({
|
||||
minHours: 9,
|
||||
maxHours: 18
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
+example-code
|
||||
:code
|
||||
<input type='text' id='timepicker-actions-exmpl' />
|
||||
<script>
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
start.setHours(9);
|
||||
start.setMinutes(0);
|
||||
|
||||
// Если сегодня суббота или воскресенье - 10:00
|
||||
if ([6,0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
|
||||
$('#timepicker-actions-exmpl').datepicker({
|
||||
timepicker: true,
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function(fd, d, picker) {
|
||||
// Ничего не делаем если выделение было снято
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
picker.update({
|
||||
minHours: 10,
|
||||
maxHours: 16
|
||||
})
|
||||
} else {
|
||||
picker.update({
|
||||
minHours: 9,
|
||||
maxHours: 18
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
article
|
||||
h2#localization Локализация
|
||||
p
|
||||
@ -317,6 +454,7 @@ block content
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
|
||||
@ -363,6 +501,24 @@ block content
|
||||
li
|
||||
+param('@')
|
||||
| - время в миллесекундах
|
||||
li
|
||||
+param('h')
|
||||
| - часы
|
||||
li
|
||||
+param('hh')
|
||||
| - часы, с лидирующим нулем
|
||||
li
|
||||
+param('i')
|
||||
| - минуты
|
||||
li
|
||||
+param('ii')
|
||||
| - минуты, с лидирующим нулем
|
||||
li
|
||||
+param('aa')
|
||||
| - период дня - 'am' или 'pm'
|
||||
li
|
||||
+param('AA')
|
||||
| - период дня заглавными буквами
|
||||
li
|
||||
+param('d')
|
||||
| - дата
|
||||
@ -575,6 +731,12 @@ block content
|
||||
+example-inline('view = "months"', 'js')
|
||||
| .
|
||||
|
||||
.param
|
||||
+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
|
||||
p Если
|
||||
+example-inline('true')
|
||||
| , то будет добавлена возомжность выбора времени.
|
||||
|
||||
article
|
||||
h2#events События
|
||||
.param
|
||||
|
||||
@ -160,23 +160,23 @@ var Datepicker;
|
||||
}
|
||||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||||
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
|
||||
this.$el.on('clickCell.adp', this._onClickCell.bind(this));
|
||||
}
|
||||
|
||||
if (this.opts.classes) {
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker = new Datepicker.Timepicker(this, this.opts);
|
||||
this._bindTimepickerEvents();
|
||||
}
|
||||
|
||||
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
|
||||
this.views[this.currentView].show();
|
||||
this.nav = new Datepicker.Navigation(this, this.opts);
|
||||
this.view = this.currentView;
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker = new Datepicker.Timepicker(this, this.opts);
|
||||
this._bindTimepickerEvents();
|
||||
}
|
||||
|
||||
this.$el.on('clickCell.adp', this._onClickCell.bind(this));
|
||||
this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
|
||||
this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
|
||||
|
||||
@ -564,6 +564,7 @@ var Datepicker;
|
||||
*/
|
||||
update: function (param, value) {
|
||||
var len = arguments.length;
|
||||
|
||||
if (len == 2) {
|
||||
this.opts[param] = value;
|
||||
} else if (len == 1 && typeof param == 'object') {
|
||||
@ -591,9 +592,16 @@ var Datepicker;
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker._handleDate(this.lastSelectedDate);
|
||||
this.timepicker._updateRanges();
|
||||
this.timepicker._updateCurrentTime()
|
||||
this.timepicker._updateCurrentTime();
|
||||
// Change hours and minutes if it's values have been changed through min/max hours/minutes
|
||||
if (this.lastSelectedDate) {
|
||||
this.lastSelectedDate.setHours(this.timepicker.hours);
|
||||
this.lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
}
|
||||
|
||||
this._setInputValue();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -1158,7 +1166,9 @@ var Datepicker;
|
||||
this.selectDate(date);
|
||||
} else {
|
||||
this._setInputValue();
|
||||
this._triggerOnChange();
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
hourMin: this.minHours,
|
||||
hourMax: lz(this.maxHours),
|
||||
hourStep: this.opts.hoursStep,
|
||||
hourValue: lz(this.hours),
|
||||
hourValue: lz(this.displayHours),
|
||||
minMin: this.minMinutes,
|
||||
minMax: lz(this.maxMinutes),
|
||||
minStep: this.opts.minutesStep,
|
||||
@ -107,7 +107,8 @@
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm = $('<span class="datepicker--time-current-ampm">')
|
||||
.appendTo($('.datepicker--time-current', this.$timepicker));
|
||||
.appendTo($('.datepicker--time-current', this.$timepicker))
|
||||
.html(this.dayPeriod)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user