assets/javascripts/materialize/datepicker.js in materialize-sass-1.0.0.beta vs assets/javascripts/materialize/datepicker.js in materialize-sass-1.0.0.rc1
- old
+ new
@@ -10,10 +10,12 @@
(function ($) {
'use strict';
var _defaults = {
+ // Close when date is selected
+ autoClose: false,
// the default output format for the input field value
format: 'mmm dd, yyyy',
// Used to create date object from current input string
@@ -127,18 +129,17 @@
_this._setupEventHandlers();
if (!_this.options.defaultDate) {
_this.options.defaultDate = new Date(Date.parse(_this.el.value));
- _this.options.setDefaultDate = true;
}
var defDate = _this.options.defaultDate;
-
if (Datepicker._isDate(defDate)) {
if (_this.options.setDefaultDate) {
_this.setDate(defDate, true);
+ _this.setInputValue();
} else {
_this.gotoDate(defDate);
}
} else {
_this.gotoDate(new Date());
@@ -147,11 +148,10 @@
/**
* Describes open/close state of datepicker
* @type {Boolean}
*/
_this.isOpen = false;
-
return _this;
}
_createClass(Datepicker, [{
key: 'destroy',
@@ -168,15 +168,15 @@
this.el.M_Datepicker = undefined;
}
}, {
key: 'destroySelects',
value: function destroySelects() {
- var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
+ var oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
if (oldYearSelect) {
M.FormSelect.getInstance(oldYearSelect).destroy();
}
- var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
+ var oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
if (oldMonthSelect) {
M.FormSelect.getInstance(oldMonthSelect).destroy();
}
}
}, {
@@ -307,27 +307,18 @@
if (newCalendar) {
this.calendars = [{
month: date.getMonth(),
year: date.getFullYear()
}];
- // if (this.options.mainCalendar === 'right') {
- // this.calendars[0].month += 1 - this.options.numberOfMonths;
- // }
}
this.adjustCalendars();
}
}, {
key: 'adjustCalendars',
value: function adjustCalendars() {
this.calendars[0] = this.adjustCalendar(this.calendars[0]);
- // for (let c = 1; c < this.options.numberOfMonths; c++) {
- // this.calendars[c] = this.adjustCalendar({
- // month: this.calendars[0].month + c,
- // year: this.calendars[0].year
- // });
- // }
this.draw();
}
}, {
key: 'adjustCalendar',
value: function adjustCalendar(calendar) {
@@ -467,16 +458,16 @@
arr.push('is-startrange');
}
if (opts.isEndRange) {
arr.push('is-endrange');
}
- return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' + '<button class="datepicker-day-button" type="button" ' + 'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' + opts.day + '</button>' + '</td>';
+ return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' + ('<button class="datepicker-day-button" type="button" data-year="' + opts.year + '" data-month="' + opts.month + '" data-day="' + opts.day + '">' + opts.day + '</button>') + '</td>';
}
}, {
key: 'renderRow',
value: function renderRow(days, isRTL, isRowSelected) {
- return '<tr class="pika-row' + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
+ return '<tr class="datepicker-row' + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
}
}, {
key: 'renderTable',
value: function renderTable(opts, data, randId) {
return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + randId + '">' + this.renderHead(opts) + this.renderBody(data) + '</table></div>';
@@ -513,11 +504,11 @@
for (arr = [], i = 0; i < 12; i++) {
arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' + (i === month ? ' selected="selected"' : '') + (isMinYear && i < opts.minMonth || isMaxYear && i > opts.maxMonth ? 'disabled="disabled"' : '') + '>' + opts.i18n.months[i] + '</option>');
}
- monthHtml = '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select>';
+ monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' + arr.join('') + '</select>';
if ($.isArray(opts.yearRange)) {
i = opts.yearRange[0];
j = opts.yearRange[1] + 1;
} else {
@@ -525,15 +516,15 @@
j = 1 + year + opts.yearRange;
}
for (arr = []; i < j && i <= opts.maxYear; i++) {
if (i >= opts.minYear) {
- arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + i + '</option>');
+ arr.push('<option value="' + i + '" ' + (i === year ? 'selected="selected"' : '') + '>' + i + '</option>');
}
}
- yearHtml = '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select>';
+ yearHtml = '<select class="datepicker-select orig-select-year" tabindex="-1">' + arr.join('') + '</select>';
var leftArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
html += '<button class="month-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + leftArrow + '</button>';
html += '<div class="selects-container">';
@@ -550,14 +541,12 @@
if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
next = false;
}
- // if (c === (this.options.numberOfMonths - 1) ) {
var rightArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
html += '<button class="month-next' + (next ? '' : ' is-disabled') + '" type="button">' + rightArrow + '</button>';
- // }
return html += '</div>';
}
/**
@@ -589,11 +578,11 @@
if (!isNaN(maxMonth) && this._m > maxMonth) {
this._m = maxMonth;
}
}
- randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
+ randId = 'datepicker-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
for (var c = 0; c < 1; c++) {
this._renderDateDisplay();
html += this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
}
@@ -601,14 +590,20 @@
this.destroySelects();
this.calendarEl.innerHTML = html;
// Init Materialize Select
- var yearSelect = this.calendarEl.querySelector('.pika-select-year');
- var monthSelect = this.calendarEl.querySelector('.pika-select-month');
- M.FormSelect.init(yearSelect, { classes: 'select-year', dropdownOptions: { container: document.body, constrainWidth: false } });
- M.FormSelect.init(monthSelect, { classes: 'select-month', dropdownOptions: { container: document.body, constrainWidth: false } });
+ var yearSelect = this.calendarEl.querySelector('.orig-select-year');
+ var monthSelect = this.calendarEl.querySelector('.orig-select-month');
+ M.FormSelect.init(yearSelect, {
+ classes: 'select-year',
+ dropdownOptions: { container: document.body, constrainWidth: false }
+ });
+ M.FormSelect.init(monthSelect, {
+ classes: 'select-month',
+ dropdownOptions: { container: document.body, constrainWidth: false }
+ });
// Add change handlers for select
yearSelect.addEventListener('change', this._handleYearChange.bind(this));
monthSelect.addEventListener('change', this._handleMonthChange.bind(this));
@@ -650,22 +645,21 @@
var _this4 = this;
this.$modalEl = $(Datepicker._template);
this.modalEl = this.$modalEl[0];
- this.calendarEl = this.modalEl.querySelector('.pika-single');
+ this.calendarEl = this.modalEl.querySelector('.datepicker-calendar');
this.yearTextEl = this.modalEl.querySelector('.year-text');
this.dateTextEl = this.modalEl.querySelector('.date-text');
if (this.options.showClearBtn) {
this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
}
this.doneBtn = this.modalEl.querySelector('.datepicker-done');
this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
this.formats = {
-
d: function () {
return _this4.date.getDate();
},
dd: function () {
var d = _this4.date.getDate();
@@ -732,28 +726,20 @@
}
var $target = $(e.target);
if (!$target.hasClass('is-disabled')) {
if ($target.hasClass('datepicker-day-button') && !$target.hasClass('is-empty') && !$target.parent().hasClass('is-disabled')) {
- this.setDate(new Date(e.target.getAttribute('data-pika-year'), e.target.getAttribute('data-pika-month'), e.target.getAttribute('data-pika-day')));
+ this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')));
+ if (this.options.autoClose) {
+ this._finishSelection();
+ }
} else if ($target.closest('.month-prev').length) {
this.prevMonth();
} else if ($target.closest('.month-next').length) {
this.nextMonth();
}
}
- // if (!$target.hasClass('pika-select')) {
- // // if this is touch event prevent mouse events emulation
- // // if (e.preventDefault) {
- // // e.preventDefault();
- // // } else {
- // // e.returnValue = false;
- // // return false;
- // // }
- // } else {
- // this._c = true;
- // }
}
}, {
key: '_handleClearClick',
value: function _handleClearClick() {
this.date = null;
@@ -812,13 +798,10 @@
}
if (Datepicker._isDate(date)) {
this.setDate(date);
}
- // if (!self._v) {
- // self.show();
- // }
}
}, {
key: 'renderDayName',
value: function renderDayName(opts, day, abbr) {
day += opts.firstDay;
@@ -940,10 +923,10 @@
}]);
return Datepicker;
}(Component);
- Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
+ Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="datepicker-calendar"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
M.Datepicker = Datepicker;
if (M.jQueryLoaded) {
M.initializeJqueryWrapper(Datepicker, 'datepicker', 'M_Datepicker');