diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index 788c05f..62ef3b7 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -77,6 +77,23 @@ cursor: default; background: none; } +.datepicker--buttons { + display: flex; + margin: 4px 2px; } + +.datepicker--button { + background: #f2f2f2; + cursor: pointer; + border-radius: 2px; + margin: 0 2px; + flex: 1; + display: inline-flex; + justify-content: center; + align-items: center; + height: 24px; } + .datepicker--button:hover { + background: #eaeaea; } + .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #ddd; font-size: .9em; } diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index ec33fc6..a8235dd 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -11,7 +11,7 @@ var Datepicker; defaults = { //TODO сделать работу с инпутом inline: true, - region: 'ru', + language: 'ru', start: '', // Start date firstDay: 1, // Week's first day weekends: [6, 0], @@ -36,6 +36,9 @@ var Datepicker; multipleDates: false, // Boolean or Number multipleDatesSeparator: ',', + todayButton: false, + clearButton: false, + // navigation prevHtml: '«', nextHtml: '»', @@ -57,7 +60,7 @@ var Datepicker; this._buildDatepickersContainer(); } - this.loc = Datepicker.region[this.opts.region]; + this.loc = Datepicker.language[this.opts.language]; if ($body == undefined) { $body = $('body'); @@ -84,9 +87,9 @@ var Datepicker; init: function () { this._buildBaseHtml(); - this.nav = new Datepicker.Navigation(this, this.opts); 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); this.view = this.currentView; this.inited = true; @@ -116,7 +119,7 @@ var Datepicker; }, - _triggerOnChange: function (cellType) { + _triggerOnChange: function () { if (!this.selectedDates.length) { return this.opts.onChange('', '', this); } @@ -187,6 +190,8 @@ var Datepicker; result = result.replace('m',d.month + 1); case /MM/.test(result): result = result.replace('MM', this.loc.months[d.month]); + case /M/.test(result): + result = result.replace('M', this.loc.monthsShort[d.month]); case /yyyy/.test(result): result = result.replace('yyyy', d.year); case /yy/.test(result): @@ -245,6 +250,19 @@ var Datepicker; }) }, + today: function () { + this.silent = true; + this.view = this.opts.minView; + this.silent = false; + this.date = new Date(); + }, + + clear: function () { + this.selectedDates = []; + this.views[this.currentView]._render(); + this._triggerOnChange() + }, + _isSelected: function (checkDate, cellType) { return this.selectedDates.some(function (date) { return Datepicker.isSame(date, checkDate, cellType) @@ -316,6 +334,10 @@ var Datepicker; return this.currentView; }, + get cellType() { + return this.view.substring(0, this.view.length - 1) + }, + get minTime() { var min = Datepicker.getParsedDate(this.minDate); return new Date(min.year, min.month, min.date).getTime() @@ -392,25 +414,31 @@ var Datepicker; }; })(window, jQuery, ''); -;(function () { - Datepicker.region = { - 'ru': { - days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'], - months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'] - } +Datepicker.language = { + ru: { + days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], + daysShort: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'], + months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], + monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'], + today: 'Сегодня', + clear: 'Очистить' } -})(); +}; ;(function () { var template = '' + '
#{prevHtml}
' + '
#{title}
' + - '
#{nextHtml}
'; + '
#{nextHtml}
', + buttonsContainerTemplate = '
', + button = '#{label}'; Datepicker.Navigation = function (d, opts) { this.d = d; this.opts = opts; + this.$buttonsContainer = ''; + this.init(); }; @@ -423,10 +451,19 @@ var Datepicker; _bindEvents: function () { this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this)); this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this)); + if (this.$buttonsContainer.length) { + this.$buttonsContainer.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this)); + } }, _buildBaseHtml: function () { this._render(); + if (this.opts.todayButton) { + this._addButton('today') + } + if (this.opts.clearButton) { + this._addButton('clear') + } this.$navButton = $('.datepicker--nav-action', this.d.$nav); }, @@ -454,21 +491,23 @@ var Datepicker; return types[this.d.view]; }, - _onClickNavButton: function (e) { - var $el = $(e.target), - action = $el.data('action'); - - this.d[action](); - }, - - _onClickNavTitle: function (e) { - if ($(e.target).hasClass('-disabled-')) return; - - if (this.d.view == 'days') { - return this.d.view = 'months' + _addButton: function (type) { + if (!this.$buttonsContainer.length) { + this._addButtonsContainer(); } - this.d.view = 'years'; + var data = { + action: type, + label: this.d.loc[type] + }, + html = Datepicker.template(button, data); + + this.$buttonsContainer.append(html); + }, + + _addButtonsContainer: function () { + this.d.$datepicker.append(buttonsContainerTemplate); + this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker); }, setNavStatus: function () { @@ -513,8 +552,24 @@ var Datepicker; _activateNav: function (nav) { $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-') - } + }, + _onClickNavButton: function (e) { + var $el = $(e.target), + action = $el.data('action'); + + this.d[action](); + }, + + _onClickNavTitle: function (e) { + if ($(e.target).hasClass('-disabled-')) return; + + if (this.d.view == 'days') { + return this.d.view = 'months' + } + + this.d.view = 'years'; + } } })(); @@ -573,7 +628,7 @@ 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.daysShort[curDay] + '
'; return this._getDayNamesHtml(firstDay, ++curDay, html, ++i); }, @@ -782,7 +837,7 @@ Datepicker.Cell = function () { // Select date if min view is reached var selectedDate = new Date(year, month, date), - alreadySelected = this.d._isSelected(selectedDate, this.d.view.substring(0, this.d.view.length - 1)), + alreadySelected = this.d._isSelected(selectedDate, this.d.cellType), triggerOnChange = true; if (!alreadySelected) { diff --git a/index.html b/index.html index f1c4bc4..73cf84d 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@