jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve keyboard navigation (min, max dates), add 'classes' option

Browse Source
This commit is contained in:
t1m0n 2015-12-04 00:15:46 +03:00
parent a4a43a04aa
commit 6b7f77ac0c
8 changed files with 117 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/css/datepicker.css vendored
View File

@ -49,6 +49,11 @@
cursor: default; cursor: default;
color: #aeaeae; color: #aeaeae;
background: none; } background: none; }
.datepicker--cell.-disabled-.-focus- {
color: #aeaeae;
background: #f0f0f0; }
.datepicker--cell.-disabled-.-current-:hover {
color: #aeaeae; }
.datepicker--cell.-selected- { .datepicker--cell.-selected- {
color: #fff; color: #fff;
background: #5cc4ef; } background: #5cc4ef; }

2
dist/css/datepicker.min.css vendored
View File

File diff suppressed because one or more lines are too long

43
dist/js/datepicker.js vendored
View File

@ -12,6 +12,7 @@ var Datepicker;
'<div class="datepicker--content"></div>' + '<div class="datepicker--content"></div>' +
'</div>', '</div>',
defaults = { defaults = {
classes: '',
inline: false, inline: false,
language: 'ru', language: 'ru',
startDate: new Date(), startDate: new Date(),
@ -129,6 +130,10 @@ var Datepicker;
} }
} }
if (this.opts.classes) {
this.$datepicker.addClass(this.opts.classes)
}
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts); this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show(); this.views[this.currentView].show();
this.nav = new Datepicker.Navigation(this, this.opts); this.nav = new Datepicker.Navigation(this, this.opts);
@ -416,6 +421,10 @@ var Datepicker;
} }
} }
if (this.opts.classes) {
this.$datepicker.addClass(this.opts.classes)
}
return this; return this;
}, },
@ -598,7 +607,7 @@ var Datepicker;
_onBlur: function () { _onBlur: function () {
if (!this.inFocus && this.visible) { if (!this.inFocus && this.visible) {
//this.hide(); this.hide();
} }
}, },
@ -624,7 +633,7 @@ var Datepicker;
this.setPosition(); this.setPosition();
} }
}, },
//TODO добавить esc
_onKeyDown: function (e) { _onKeyDown: function (e) {
var code = e.which; var code = e.which;
@ -637,6 +646,7 @@ var Datepicker;
if (code == 13) { if (code == 13) {
if (this.focused) { if (this.focused) {
if (this._getCell(this.focused).hasClass('-disabled-')) return;
if (this.view != this.opts.minView) { if (this.view != this.opts.minView) {
this.down() this.down()
} else { } else {
@ -691,13 +701,18 @@ var Datepicker;
break; break;
} }
totalDaysInNextMonth = Datepicker.getDaysCount( new Date(y,m)); totalDaysInNextMonth = Datepicker.getDaysCount(new Date(y,m));
nd = new Date(y,m,d);
if (totalDaysInNextMonth < d) d = totalDaysInNextMonth; if (totalDaysInNextMonth < d) d = totalDaysInNextMonth;
if (this._isInRange(new Date(y,m,d), this.cellType)) { if (nd.getTime() < this.minTime) {
this.focused = new Date(y,m,d); nd = this.minDate;
} else if (nd.getTime() > this.maxTime) {
nd = this.maxDate;
} }
this.focused = nd;
}, },
_registerKey: function (key) { _registerKey: function (key) {
@ -774,10 +789,15 @@ var Datepicker;
break; break;
} }
if (this._isInRange(new Date(y,m,d), this.cellType)) { var nd = new Date(y,m,d);
this.focused = new Date(y,m,d); if (nd.getTime() < this.minTime) {
nd = this.minDate;
} else if (nd.getTime() > this.maxTime) {
nd = this.maxDate;
} }
this.focused = nd;
}, },
_getFocusedDate: function () { _getFocusedDate: function () {
@ -810,13 +830,12 @@ var Datepicker;
switch (type) { switch (type) {
case 'month': case 'month':
selector += '[data-month="' + d.month + '"]'; selector = '[data-month="' + d.month + '"]';
break; break;
case 'day': case 'day':
selector += '[data-month="' + d.month + '"][data-date="' + d.date + '"]'; selector += '[data-month="' + d.month + '"][data-date="' + d.date + '"]';
break; break;
} }
$cell = this.views[this.currentView].$el.find(selector); $cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : ''; return $cell.length ? $cell : '';
@ -977,10 +996,10 @@ var Datepicker;
$.data(this, pluginName, $.data(this, pluginName,
new Datepicker( this, options )); new Datepicker( this, options ));
} else { } else {
var _this = $.data(this, pluginName), var _this = $.data(this, pluginName);
oldOpts = _this.opts;
_this.opts = $.extend({}, oldOpts, options); _this.opts = $.extend(true, _this.opts, options);
_this.update();
} }
}); });
} }

2
dist/js/datepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

25
docs/index-ru.html
View File

@ -11,13 +11,24 @@ $('#my-element').datepicker([options])
// Доступ к экземпляру объекта // Доступ к экземпляру объекта
$('#my-element').data('datepicker') $('#my-element').data('datepicker')
</code></pre></article><article><h2 id="examples">Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" readonly id="test" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type='text' class='datepicker-here' /&gt; </code></pre></article><article><h2 id="examples">Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" readonly id="test" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type='text' class='datepicker-here' /&gt;
</code></pre><script>$('#test').datepicker({ </code></pre><script>$(function () {
onChangeYear: function () { $('#test').datepicker({
console.log(arguments); onRenderCell: function (d, type) {
}, if (type == 'day' && d.getDate() == 4) {
onChangeMonth: function (m, y) { return {
console.log(arguments); disabled: true
} }
}
},
classes: 'hello',
onChangeYear: function () {
console.log(arguments);
},
onChangeMonth: function (m, y) {
console.log(arguments);
}
})
}) })
</script></div><h3>Выбор нескольких дат</h3><p>Передайте параметр<span class="example-inline"><code class="js">{multipleDates: true}</code></span>для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число<span class="example-inline"><code class="js">{multipleDates: 3}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-multiple-dates="3" data-multiple-dates-separator=", " data-position="top left" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot; </script></div><h3>Выбор нескольких дат</h3><p>Передайте параметр<span class="example-inline"><code class="js">{multipleDates: true}</code></span>для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число<span class="example-inline"><code class="js">{multipleDates: 3}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-multiple-dates="3" data-multiple-dates-separator=", " data-position="top left" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
class=&quot;datepicker-here&quot; class=&quot;datepicker-here&quot;

25
docs/jade/pages/index-ru.jade
View File

@ -72,13 +72,24 @@ block content
<input type='text' class='datepicker-here' /> <input type='text' class='datepicker-here' />
script. script.
$('#test').datepicker({ $(function () {
onChangeYear: function () { $('#test').datepicker({
console.log(arguments); onRenderCell: function (d, type) {
}, if (type == 'day' && d.getDate() == 4) {
onChangeMonth: function (m, y) { return {
console.log(arguments); disabled: true
} }
}
},
classes: 'hello',
onChangeYear: function () {
console.log(arguments);
},
onChangeMonth: function (m, y) {
console.log(arguments);
}
})
}) })
h3 Выбор нескольких дат h3 Выбор нескольких дат

43
src/js/datepicker.js
View File

@ -12,6 +12,7 @@ var Datepicker;
'<div class="datepicker--content"></div>' + '<div class="datepicker--content"></div>' +
'</div>', '</div>',
defaults = { defaults = {
classes: '',
inline: false, inline: false,
language: 'ru', language: 'ru',
startDate: new Date(), startDate: new Date(),
@ -129,6 +130,10 @@ var Datepicker;
} }
} }
if (this.opts.classes) {
this.$datepicker.addClass(this.opts.classes)
}
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts); this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show(); this.views[this.currentView].show();
this.nav = new Datepicker.Navigation(this, this.opts); this.nav = new Datepicker.Navigation(this, this.opts);
@ -416,6 +421,10 @@ var Datepicker;
} }
} }
if (this.opts.classes) {
this.$datepicker.addClass(this.opts.classes)
}
return this; return this;
}, },
@ -598,7 +607,7 @@ var Datepicker;
_onBlur: function () { _onBlur: function () {
if (!this.inFocus && this.visible) { if (!this.inFocus && this.visible) {
//this.hide(); this.hide();
} }
}, },
@ -624,7 +633,7 @@ var Datepicker;
this.setPosition(); this.setPosition();
} }
}, },
//TODO добавить esc
_onKeyDown: function (e) { _onKeyDown: function (e) {
var code = e.which; var code = e.which;
@ -637,6 +646,7 @@ var Datepicker;
if (code == 13) { if (code == 13) {
if (this.focused) { if (this.focused) {
if (this._getCell(this.focused).hasClass('-disabled-')) return;
if (this.view != this.opts.minView) { if (this.view != this.opts.minView) {
this.down() this.down()
} else { } else {
@ -691,13 +701,18 @@ var Datepicker;
break; break;
} }
totalDaysInNextMonth = Datepicker.getDaysCount( new Date(y,m)); totalDaysInNextMonth = Datepicker.getDaysCount(new Date(y,m));
nd = new Date(y,m,d);
if (totalDaysInNextMonth < d) d = totalDaysInNextMonth; if (totalDaysInNextMonth < d) d = totalDaysInNextMonth;
if (this._isInRange(new Date(y,m,d), this.cellType)) { if (nd.getTime() < this.minTime) {
this.focused = new Date(y,m,d); nd = this.minDate;
} else if (nd.getTime() > this.maxTime) {
nd = this.maxDate;
} }
this.focused = nd;
}, },
_registerKey: function (key) { _registerKey: function (key) {
@ -774,10 +789,15 @@ var Datepicker;
break; break;
} }
if (this._isInRange(new Date(y,m,d), this.cellType)) { var nd = new Date(y,m,d);
this.focused = new Date(y,m,d); if (nd.getTime() < this.minTime) {
nd = this.minDate;
} else if (nd.getTime() > this.maxTime) {
nd = this.maxDate;
} }
this.focused = nd;
}, },
_getFocusedDate: function () { _getFocusedDate: function () {
@ -810,13 +830,12 @@ var Datepicker;
switch (type) { switch (type) {
case 'month': case 'month':
selector += '[data-month="' + d.month + '"]'; selector = '[data-month="' + d.month + '"]';
break; break;
case 'day': case 'day':
selector += '[data-month="' + d.month + '"][data-date="' + d.date + '"]'; selector += '[data-month="' + d.month + '"][data-date="' + d.date + '"]';
break; break;
} }
$cell = this.views[this.currentView].$el.find(selector); $cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : ''; return $cell.length ? $cell : '';
@ -977,10 +996,10 @@ var Datepicker;
$.data(this, pluginName, $.data(this, pluginName,
new Datepicker( this, options )); new Datepicker( this, options ));
} else { } else {
var _this = $.data(this, pluginName), var _this = $.data(this, pluginName);
oldOpts = _this.opts;
_this.opts = $.extend({}, oldOpts, options); _this.opts = $.extend(true, _this.opts, options);
_this.update();
} }
}); });
} }

13
src/sass/cell.scss
View File

@ -27,7 +27,7 @@
color: map_get($textColor, currentDate); color: map_get($textColor, currentDate);
&.-focus- { &.-focus- {
color: map_get($textColor, common);; color: map_get($textColor, common);
} }
&:hover { &:hover {
@ -40,6 +40,17 @@
cursor: default; cursor: default;
color: map_get($textColor, disabled); color: map_get($textColor, disabled);
background: none; background: none;
&.-focus- {
color: map_get($textColor, disabled);
background: map_get($bg, hover);
}
&.-current- {
&:hover {
color: map_get($textColor, disabled);
}
}
} }
&.-selected- { &.-selected- {