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

add showOtherMonths, selectOtherMonths, moveToOtherMonthsOnSelect options

Browse Source
This commit is contained in:
t1m0n 2015-10-29 11:36:20 +03:00
parent 807923600e
commit 9323a08019
7 changed files with 116 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dist/css/datepicker.css vendored
View File

@ -8,8 +8,7 @@
width: 224px; }
.datepicker--body {
display: none;
margin: -1px; }
display: none; }
.datepicker--body.active {
display: block; }
@ -77,12 +76,26 @@
color: #60C4F5; }
.datepicker--cell.-current-:hover {
background: rgba(96, 196, 245, 0.05); }
.datepicker--cell.-disabled- {
cursor: default;
background: none; }
.datepicker--cell.-selected- {
color: #fff;
background: skyblue; }
.datepicker--cell.-selected-.-current- {
color: #fff;
background: skyblue; }
.datepicker--cell-day.-other-month- {
color: #ddd; }
.datepicker--cell-day {
border-radius: 50%; }
.datepicker--cell-day.-other-month- {
color: #ddd; }
.datepicker--cell-day.-other-month-.-selected- {
color: #fff;
background: #def2fa; }
.datepicker--cell-day.-other-month-.-selected-.-disabled- {
background: none;
border: none; }
.datepicker--cell-month {
width: 33.33%;

47
dist/js/datepicker.js vendored
View File

@ -9,6 +9,7 @@ var Datepicker;
'<div class="datepicker--content"></div>' +
'</div>',
defaults = {
//TODO сделать работу с инпутом
inline: true,
region: 'ru',
firstDay: 1, // Week's first day
@ -18,8 +19,10 @@ var Datepicker;
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
showOtherMonths: '',
selectOtherMonths: '',
//TODO сделать тоже самое с годами
showOtherMonths: true,
selectOtherMonths: true,
moveToOtherMonthsOnSelect: true,
//TODO сделать минимальные, максимальные даты
minDate: '',
@ -56,7 +59,7 @@ var Datepicker;
}
this.inited = false;
this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.start;
this.currentView = this.opts.defaultView;
this.selectedDates = [];
@ -184,6 +187,15 @@ var Datepicker;
},
selectDate: function (date) {
var d = this.parsedDate;
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
this.silent = true;
this.date = new Date(date.getFullYear(),date.getMonth(), 1);
this.silent = false;
this.nav._render()
}
if (this.opts.multipleDates) {
if (!this._isSelected(date)) {
this.selectedDates.push(date);
@ -221,7 +233,7 @@ var Datepicker;
set date (val) {
this.currentDate = val;
if (this.inited) {
if (this.inited && !this.silent) {
this.views[this.view]._render();
this.nav._render();
}
@ -487,14 +499,27 @@ Datepicker.Cell = function () {
_getDayHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-day",
currentDate = new Date(),
d = Datepicker.getParsedDate(date);
d = Datepicker.getParsedDate(date),
html = d.date;
if (this.d.isWeekend(d.day)) _class += " -weekend-";
if (d.month != this.d.parsedDate.month) _class += " -other-month-";
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
if (d.month != this.d.parsedDate.month) {
_class += " -other-month-";
return '<div class="' + _class + '" data-date="' + date.getDate() + '" data-month="' + date.getMonth() + '">' + date.getDate() + '</div>';
if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
_class += " -disabled-";
}
if (!this.opts.showOtherMonths) html = '';
}
return '<div class="' + _class + '" ' +
'data-date="' + date.getDate() + '" ' +
'data-month="' + date.getMonth() + '" ' +
'data-year="' + date.getFullYear() + '">' + html + '</div>';
},
/**
@ -577,7 +602,7 @@ Datepicker.Cell = function () {
},
_render: function () {
this._renderTypes[this.type].bind(this)()
this._renderTypes[this.type].bind(this)();
},
show: function () {
@ -595,10 +620,12 @@ Datepicker.Cell = function () {
_handleClick: {
days: function (el) {
if (el.hasClass('-disabled-')) return;
var date = el.data('date'),
month = el.data('month'),
d = this.d.parsedDate,
selectedDate = new Date(d.year, month, date),
year = el.data('year'),
selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, 'day'),
triggerOnChange = true;

27
js/datepicker/body.js
View File

@ -87,14 +87,27 @@
_getDayHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-day",
currentDate = new Date(),
d = Datepicker.getParsedDate(date);
d = Datepicker.getParsedDate(date),
html = d.date;
if (this.d.isWeekend(d.day)) _class += " -weekend-";
if (d.month != this.d.parsedDate.month) _class += " -other-month-";
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
if (d.month != this.d.parsedDate.month) {
_class += " -other-month-";
return '<div class="' + _class + '" data-date="' + date.getDate() + '" data-month="' + date.getMonth() + '">' + date.getDate() + '</div>';
if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
_class += " -disabled-";
}
if (!this.opts.showOtherMonths) html = '';
}
return '<div class="' + _class + '" ' +
'data-date="' + date.getDate() + '" ' +
'data-month="' + date.getMonth() + '" ' +
'data-year="' + date.getFullYear() + '">' + html + '</div>';
},
/**
@ -177,7 +190,7 @@
},
_render: function () {
this._renderTypes[this.type].bind(this)()
this._renderTypes[this.type].bind(this)();
},
show: function () {
@ -195,10 +208,12 @@
_handleClick: {
days: function (el) {
if (el.hasClass('-disabled-')) return;
var date = el.data('date'),
month = el.data('month'),
d = this.d.parsedDate,
selectedDate = new Date(d.year, month, date),
year = el.data('year'),
selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, 'day'),
triggerOnChange = true;

20
js/datepicker/datepicker.js
View File

@ -9,6 +9,7 @@ var Datepicker;
'<div class="datepicker--content"></div>' +
'</div>',
defaults = {
//TODO сделать работу с инпутом
inline: true,
region: 'ru',
firstDay: 1, // Week's first day
@ -18,8 +19,10 @@ var Datepicker;
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
showOtherMonths: '',
selectOtherMonths: '',
//TODO сделать тоже самое с годами
showOtherMonths: true,
selectOtherMonths: true,
moveToOtherMonthsOnSelect: true,
//TODO сделать минимальные, максимальные даты
minDate: '',
@ -56,7 +59,7 @@ var Datepicker;
}
this.inited = false;
this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.start;
this.currentView = this.opts.defaultView;
this.selectedDates = [];
@ -184,6 +187,15 @@ var Datepicker;
},
selectDate: function (date) {
var d = this.parsedDate;
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
this.silent = true;
this.date = new Date(date.getFullYear(),date.getMonth(), 1);
this.silent = false;
this.nav._render()
}
if (this.opts.multipleDates) {
if (!this._isSelected(date)) {
this.selectedDates.push(date);
@ -221,7 +233,7 @@ var Datepicker;
set date (val) {
this.currentDate = val;
if (this.inited) {
if (this.inited && !this.silent) {
this.views[this.view]._render();
this.nav._render();
}

25
sass/datepicker/_cell.scss
View File

@ -33,9 +33,19 @@
}
}
&.-disabled- {
cursor: default;
background: none;
}
&.-selected- {
color: #fff;
background: skyblue;
background: $colorCellSelected;
&.-current- {
color: #fff;
background: $colorCellSelected;
}
}
}
@ -43,8 +53,21 @@
// -------------------------------------------------
.datepicker--cell-day {
border-radius: 50%;
&.-other-month- {
color: $colorAnotherMonth;
&.-selected- {
color: #fff;
background: lighten($colorCellSelected, 20%);
&.-disabled- {
background: none;
border: none;
}
}
}
}

1
sass/datepicker/_datepicker.scss
View File

@ -16,7 +16,6 @@
.datepicker--body {
display: none;
margin: -1px;
&.active {
display: block;

2
sass/datepicker/datepicker-config.scss
View File

@ -12,5 +12,5 @@ $colorGrey: #ddd;
$colorAnotherMonth: #ddd;
$colorCellHover: #eee;
$colorCellCurrent: #60C4F5;
$colorCellSelected: '';
$colorCellSelected: skyblue;
$colorCellWeekend: '';