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;
color: #aeaeae;
background: none; }
.datepicker--cell.-disabled-.-focus- {
color: #aeaeae;
background: #f0f0f0; }
.datepicker--cell.-disabled-.-current-:hover {
color: #aeaeae; }
.datepicker--cell.-selected- {
color: #fff;
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>',
defaults = {
classes: '',
inline: false,
language: 'ru',
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].show();
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;
},
@ -598,7 +607,7 @@ var Datepicker;
_onBlur: function () {
if (!this.inFocus && this.visible) {
//this.hide();
this.hide();
}
},
@ -624,7 +633,7 @@ var Datepicker;
this.setPosition();
}
},
//TODO добавить esc
_onKeyDown: function (e) {
var code = e.which;
@ -637,6 +646,7 @@ var Datepicker;
if (code == 13) {
if (this.focused) {
if (this._getCell(this.focused).hasClass('-disabled-')) return;
if (this.view != this.opts.minView) {
this.down()
} else {
@ -691,13 +701,18 @@ var Datepicker;
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 (this._isInRange(new Date(y,m,d), this.cellType)) {
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;
},
_registerKey: function (key) {
@ -774,10 +789,15 @@ var Datepicker;
break;
}
if (this._isInRange(new Date(y,m,d), this.cellType)) {
this.focused = new Date(y,m,d);
var nd = 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 () {
@ -810,13 +830,12 @@ var Datepicker;
switch (type) {
case 'month':
selector += '[data-month="' + d.month + '"]';
selector = '[data-month="' + d.month + '"]';
break;
case 'day':
selector += '[data-month="' + d.month + '"][data-date="' + d.date + '"]';
break;
}
$cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : '';
@ -977,10 +996,10 @@ var Datepicker;
$.data(this, pluginName,
new Datepicker( this, options ));
} else {
var _this = $.data(this, pluginName),
oldOpts = _this.opts;
var _this = $.data(this, pluginName);
_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')
</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({
onChangeYear: function () {
console.log(arguments);
},
onChangeMonth: function (m, y) {
console.log(arguments);
}
</code></pre><script>$(function () {
$('#test').datepicker({
onRenderCell: function (d, type) {
if (type == 'day' && d.getDate() == 4) {
return {
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;
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' />
script.
$('#test').datepicker({
onChangeYear: function () {
console.log(arguments);
},
onChangeMonth: function (m, y) {
console.log(arguments);
}
$(function () {
$('#test').datepicker({
onRenderCell: function (d, type) {
if (type == 'day' && d.getDate() == 4) {
return {
disabled: true
}
}
},
classes: 'hello',
onChangeYear: function () {
console.log(arguments);
},
onChangeMonth: function (m, y) {
console.log(arguments);
}
})
})
h3 Выбор нескольких дат

43
src/js/datepicker.js
View File

@ -12,6 +12,7 @@ var Datepicker;
'<div class="datepicker--content"></div>' +
'</div>',
defaults = {
classes: '',
inline: false,
language: 'ru',
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].show();
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;
},
@ -598,7 +607,7 @@ var Datepicker;
_onBlur: function () {
if (!this.inFocus && this.visible) {
//this.hide();
this.hide();
}
},
@ -624,7 +633,7 @@ var Datepicker;
this.setPosition();
}
},
//TODO добавить esc
_onKeyDown: function (e) {
var code = e.which;
@ -637,6 +646,7 @@ var Datepicker;
if (code == 13) {
if (this.focused) {
if (this._getCell(this.focused).hasClass('-disabled-')) return;
if (this.view != this.opts.minView) {
this.down()
} else {
@ -691,13 +701,18 @@ var Datepicker;
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 (this._isInRange(new Date(y,m,d), this.cellType)) {
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;
},
_registerKey: function (key) {
@ -774,10 +789,15 @@ var Datepicker;
break;
}
if (this._isInRange(new Date(y,m,d), this.cellType)) {
this.focused = new Date(y,m,d);
var nd = 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 () {
@ -810,13 +830,12 @@ var Datepicker;
switch (type) {
case 'month':
selector += '[data-month="' + d.month + '"]';
selector = '[data-month="' + d.month + '"]';
break;
case 'day':
selector += '[data-month="' + d.month + '"][data-date="' + d.date + '"]';
break;
}
$cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : '';
@ -977,10 +996,10 @@ var Datepicker;
$.data(this, pluginName,
new Datepicker( this, options ));
} else {
var _this = $.data(this, pluginName),
oldOpts = _this.opts;
var _this = $.data(this, pluginName);
_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);
&.-focus- {
color: map_get($textColor, common);;
color: map_get($textColor, common);
}
&:hover {
@ -40,6 +40,17 @@
cursor: default;
color: map_get($textColor, disabled);
background: none;
&.-focus- {
color: map_get($textColor, disabled);
background: map_get($bg, hover);
}
&.-current- {
&:hover {
color: map_get($textColor, disabled);
}
}
}
&.-selected- {