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 days render method, update weekend and another month detection

Browse Source
This commit is contained in:
t1m0n 2015-10-10 19:16:54 +03:00
parent bf4a586628
commit bcac6b081f
8 changed files with 174 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
dist/css/datepicker.css vendored
View File

@ -3,15 +3,34 @@
------------------------------------------------- */
.datepicker {
border: 1px solid #dddddd;
box-sizing: content-box;
width: 224px; }
.datepicker--days--names {
display: flex; }
.datepicker--days-names {
display: flex;
flex-wrap: wrap; }
.datepicker--days--name {
.datepicker--day-name {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
text-align: center; }
/* -------------------------------------------------
Datepicker cells
------------------------------------------------- */
.datepicker--cells {
display: flex;
flex-wrap: wrap; }
.datepicker--cell {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px; }
.datepicker--cell-day.-another-month- {
color: #ddd; }

68
dist/js/datepicker.js vendored
View File

@ -11,8 +11,9 @@ var Datepicker;
defaults = {
inline: true,
region: 'ru',
firstDay: 1,
start: '',
firstDay: 1, // Week's first day
start: '', // Start date
weekends: [6, 0],
format: 'dd.mm.yyyy'
};
@ -58,6 +59,11 @@ var Datepicker;
},
isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1;
},
_buildDatepickersContainer: function () {
this.containerBuilt = true;
$body.append('<div class="datepickers-container" id="datepickers-container"></div>')
@ -79,7 +85,6 @@ var Datepicker;
}
};
$.fn[pluginName] = function ( options ) {
if (Datepicker.prototype[options]) {
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@ -99,6 +104,8 @@ var Datepicker;
};
})(window, jQuery, '');
;(function () {
Datepicker.region = {
'ru': {
@ -114,8 +121,8 @@ Datepicker.Cell = function () {
var templates = {
days:'' +
'<div class="datepicker--days">' +
'<div class="datepicker--days--names"></div>' +
'<div class="datepicker--days--cells"></div>' +
'<div class="datepicker--days-names"></div>' +
'<div class="datepicker--cells datepicker--cells-days"></div>' +
'</div>'
};
@ -136,8 +143,8 @@ Datepicker.Cell = function () {
_buildBaseHtml: function () {
this.$el = $(templates[this.type]).appendTo(this.d.$content);
this.$names = $('.datepicker--days--names', this.$el);
this.$cells = $('.datepicker--days--cells', this.$el);
this.$names = $('.datepicker--days-names', this.$el);
this.$cells = $('.datepicker--cells', this.$el);
},
_getDayNamesHtml: function (firstDay, curDay, html, i) {
@ -148,16 +155,53 @@ Datepicker.Cell = function () {
if (i > 7) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
},
_renderDays: function () {
var count = Datepicker.getDaysCount(this.viewDate),
dayNames = this._getDayNamesHtml(this.opts.firstDay),
firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
/**
* Calculates days number to render. Generates days html and returns it.
* @param {object} date - Date object
* @returns {string}
* @private
*/
_getDaysHtml: function (date) {
var totalMonthDays = Datepicker.getDaysCount(date),
firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
remainingDays = 6 - lastMonthDay + this.opts.firstDay,
startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter
m, y,
html = '';
for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) {
y = date.getFullYear();
m = date.getMonth();
html += this._getDayHtml(new Date(y, m, i))
}
return html;
},
_getDayHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-day";
if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-";
return '<div class="' + _class + '">' + date.getDate() + '</div>';
},
_renderDays: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.viewDate);
this.$cells.html(days);
this.$names.html(dayNames)
},

55
js/datepicker/body.js
View File

@ -2,8 +2,8 @@
var templates = {
days:'' +
'<div class="datepicker--days">' +
'<div class="datepicker--days--names"></div>' +
'<div class="datepicker--days--cells"></div>' +
'<div class="datepicker--days-names"></div>' +
'<div class="datepicker--cells datepicker--cells-days"></div>' +
'</div>'
};
@ -24,8 +24,8 @@
_buildBaseHtml: function () {
this.$el = $(templates[this.type]).appendTo(this.d.$content);
this.$names = $('.datepicker--days--names', this.$el);
this.$cells = $('.datepicker--days--cells', this.$el);
this.$names = $('.datepicker--days-names', this.$el);
this.$cells = $('.datepicker--cells', this.$el);
},
_getDayNamesHtml: function (firstDay, curDay, html, i) {
@ -36,16 +36,53 @@
if (i > 7) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
},
_renderDays: function () {
var count = Datepicker.getDaysCount(this.viewDate),
dayNames = this._getDayNamesHtml(this.opts.firstDay),
firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
/**
* Calculates days number to render. Generates days html and returns it.
* @param {object} date - Date object
* @returns {string}
* @private
*/
_getDaysHtml: function (date) {
var totalMonthDays = Datepicker.getDaysCount(date),
firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
remainingDays = 6 - lastMonthDay + this.opts.firstDay,
startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter
m, y,
html = '';
for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) {
y = date.getFullYear();
m = date.getMonth();
html += this._getDayHtml(new Date(y, m, i))
}
return html;
},
_getDayHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-day";
if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-";
return '<div class="' + _class + '">' + date.getDate() + '</div>';
},
_renderDays: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.viewDate);
this.$cells.html(days);
this.$names.html(dayNames)
},

14
js/datepicker/datepicker.js
View File

@ -11,8 +11,9 @@ var Datepicker;
defaults = {
inline: true,
region: 'ru',
firstDay: 1,
start: '',
firstDay: 1, // Week's first day
start: '', // Start date
weekends: [6, 0],
format: 'dd.mm.yyyy'
};
@ -58,6 +59,11 @@ var Datepicker;
},
isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1;
},
_buildDatepickersContainer: function () {
this.containerBuilt = true;
$body.append('<div class="datepickers-container" id="datepickers-container"></div>')
@ -79,7 +85,6 @@ var Datepicker;
}
};
$.fn[pluginName] = function ( options ) {
if (Datepicker.prototype[options]) {
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@ -98,4 +103,5 @@ var Datepicker;
}
};
})(window, jQuery, '');
})(window, jQuery, '');

3
sass/datepicker.scss
View File

@ -1 +1,2 @@
@import "datepicker/datepicker";
@import "datepicker/datepicker";
@import "datepicker/cell";

27
sass/datepicker/_cell.scss Normal file
View File

@ -0,0 +1,27 @@
@import "datepicker-config";
/* -------------------------------------------------
Datepicker cells
------------------------------------------------- */
.datepicker--cells {
display: flex;
flex-wrap: wrap;
}
.datepicker--cell {
display: flex;
align-items: center;
justify-content: center;
width: $dayCellSize;
height: $dayCellSize;
}
// Day cell
// -------------------------------------------------
.datepicker--cell-day {
&.-another-month- {
color: $colorAnotherMonth;
}
}

12
sass/datepicker/_datepicker.scss
View File

@ -6,7 +6,8 @@
.datepicker {
border: 1px solid #dddddd;
width: $width;
box-sizing: content-box;
width: $datepickerWidth;
}
// Days
@ -18,14 +19,15 @@
// Day names
// -------------------------
.datepicker--days--names {
.datepicker--days-names {
display: flex;
flex-wrap: wrap;
}
.datepicker--days--name {
.datepicker--day-name {
display: flex;
align-items: center;
justify-content: center;
width: $cellSize;
height: $cellSize;
width: $dayCellSize;
height: $dayCellSize;
text-align: center;
}

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

@ -1,3 +1,5 @@
$cellSize: 32px;
$width: 7 * $cellSize;
$dayCellSize: 32px;
$datepickerWidth: 7 * $dayCellSize;
$colorAnotherMonth: #ddd;