diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index 600f749..0903e98 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -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; } diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index fcda346..f541e36 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -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('
') @@ -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:'' + '
' + - '
' + - '
' + + '
' + + '
' + '
' }; @@ -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 += '
' + this.d.loc.days[curDay] + '
'; + html += '
' + this.d.loc.days[curDay] + '
'; 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 '
' + date.getDate() + '
'; + }, + + _renderDays: function () { + var dayNames = this._getDayNamesHtml(this.opts.firstDay), + days = this._getDaysHtml(this.viewDate); + + this.$cells.html(days); this.$names.html(dayNames) }, diff --git a/js/datepicker/body.js b/js/datepicker/body.js index 3cef4e7..d3c3e19 100644 --- a/js/datepicker/body.js +++ b/js/datepicker/body.js @@ -2,8 +2,8 @@ var templates = { days:'' + '
' + - '
' + - '
' + + '
' + + '
' + '
' }; @@ -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 += '
' + this.d.loc.days[curDay] + '
'; + html += '
' + this.d.loc.days[curDay] + '
'; 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 '
' + date.getDate() + '
'; + }, + + _renderDays: function () { + var dayNames = this._getDayNamesHtml(this.opts.firstDay), + days = this._getDaysHtml(this.viewDate); + + this.$cells.html(days); this.$names.html(dayNames) }, diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js index 66ec9df..a475f1d 100644 --- a/js/datepicker/datepicker.js +++ b/js/datepicker/datepicker.js @@ -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('
') @@ -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, ''); \ No newline at end of file +})(window, jQuery, ''); + diff --git a/sass/datepicker.scss b/sass/datepicker.scss index f59624c..f8edb83 100644 --- a/sass/datepicker.scss +++ b/sass/datepicker.scss @@ -1 +1,2 @@ -@import "datepicker/datepicker"; \ No newline at end of file +@import "datepicker/datepicker"; +@import "datepicker/cell"; \ No newline at end of file diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss new file mode 100644 index 0000000..9731e1a --- /dev/null +++ b/sass/datepicker/_cell.scss @@ -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; + } +} \ No newline at end of file diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss index e2a474c..f83c7f9 100644 --- a/sass/datepicker/_datepicker.scss +++ b/sass/datepicker/_datepicker.scss @@ -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; } \ No newline at end of file diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss index b7e1fc2..c74aac9 100644 --- a/sass/datepicker/datepicker-config.scss +++ b/sass/datepicker/datepicker-config.scss @@ -1,3 +1,5 @@ -$cellSize: 32px; -$width: 7 * $cellSize; +$dayCellSize: 32px; +$datepickerWidth: 7 * $dayCellSize; + +$colorAnotherMonth: #ddd;