Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
bulma-extensions
Advanced tools
bulma-extensions - npm Package Compare versions
Comparing version 0.7.1 to 0.7.2
@@ -73,20 +73,34 @@ var datepicker_langs = { | ||
| weekdaysShort: ['ned', 'pon', 'uto', 'sre', 'čet', 'pet', 'sub'] | ||
| }, | ||
| 'zh-cn': { | ||
| weekStart: 1, | ||
| previousMonth: '上个月', | ||
| nextMonth: '下个月', | ||
| months: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], | ||
| monthsShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], | ||
| weekdays: ['星期天', '星期一','星期二','星期三','星期四','星期五','星期六'], | ||
| weekdaysShort: ['周日', '周一','周二','周三','周四','周五','周六'] | ||
| } | ||
| } | ||
| const MOUSE_EVENTS = ['click', 'touchstart']; | ||
| class DatePicker { | ||
| constructor(selector, options) { | ||
| if (!options) options = {} | ||
| constructor(selector, options = {}) { | ||
| // Determine click event depending on if we are on Touch device or not | ||
| this._clickEvent = ('ontouchstart' in window) ? 'touchstart' : 'click'; | ||
| var defaultOptions = { | ||
| this.element = typeof selector === 'string' ? document.querySelector(selector) : selector; | ||
| // An invalid selector or non-DOM node has been provided. | ||
| if (!this.element) { | ||
| throw new Error('An invalid selector or non-DOM node has been provided.'); | ||
| } | ||
| /// Set default options and merge with instance defined | ||
| this.options = Object.assign({}, { | ||
| startDate: new Date(), | ||
| // the default data format `field` value | ||
| dataFormat: 'yyyy/mm/dd', | ||
| // internationalization | ||
| lang: 'en', | ||
| dataFormat: 'yyyy/mm/dd', // the default data format `field` value | ||
| lang: 'en', // internationalization | ||
| overlay: false, | ||
| closeOnOverlayClick: true, | ||
| closeOnSelect: true, | ||
| // callback function | ||
| // callback functions | ||
| onSelect: null, | ||
@@ -96,16 +110,17 @@ onOpen: null, | ||
| onRender: null | ||
| }; | ||
| }, options); | ||
| this.element = typeof selector === 'string' ? document.querySelector(selector) : selector; | ||
| // An invalid selector or non-DOM node has been provided. | ||
| if (!this.element) { | ||
| throw new Error('An invalid selector or non-DOM node has been provided.'); | ||
| } | ||
| // Initiate plugin | ||
| this._init(); | ||
| } | ||
| this.parent = this.element.parentElement; | ||
| /** | ||
| * Initiate plugin instance | ||
| * @method _init | ||
| * @return {DatePicker} Current plugin instance | ||
| */ | ||
| _init() { | ||
| // this.parent = this.element.parentElement; | ||
| this._id = 'datePicker' + ( new Date() ).getTime(); | ||
| this.lang = typeof datepicker_langs[this.lang] !== 'undefined' ? this.lang : 'en'; | ||
| this.options = Object.assign({}, defaultOptions, options); | ||
| this.month = this.options.startDate.getMonth(), | ||
@@ -115,76 +130,146 @@ this.year = this.options.startDate.getFullYear(), | ||
| this.build(); | ||
| this._build(); | ||
| this._bindEvents(); | ||
| return this; | ||
| } | ||
| build() { | ||
| var _this = this; | ||
| /** | ||
| * Build DatePicker HTML component and append it to the DOM | ||
| * @method _build | ||
| * @return {DatePicker} Current plugin instance | ||
| */ | ||
| _build() { | ||
| // Define DatePicker Template | ||
| const datePicker = ` | ||
| <div id='${this._id}' class="datepicker ${this.options.overlay ? 'modal' : ''}"> | ||
| ${this.options.overlay ? '<div class="modal-background"></div>' : ''} | ||
| <div class="calendar"> | ||
| <div class="calendar-nav"> | ||
| <div class="calendar-nav-previous-year"> | ||
| <button class="button is-small is-text"> | ||
| <i class="fa fa-chevron-left"></i> | ||
| </button> | ||
| </div> | ||
| <div class="calendar-nav-previous-month"> | ||
| <button class="button is-small is-text"> | ||
| <i class="fa fa-chevron-left"></i> | ||
| </button> | ||
| </div> | ||
| <div class="calendar-month">${datepicker_langs[this.options.lang].months[this.month] + ' ' + this.year}</div> | ||
| <div class="calendar-nav-next-month"> | ||
| <button class="button is-small is-text"> | ||
| <i class="fa fa-chevron-right"></i> | ||
| </button> | ||
| </div> | ||
| <div class="calendar-nav-next-year"> | ||
| <button class="button is-small is-text"> | ||
| <i class="fa fa-chevron-right"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="calendar-container"> | ||
| <div class="calendar-header"> | ||
| <div class="calendar-date">${this._getDayName(0, true)}</div> | ||
| <div class="calendar-date">${this._getDayName(1, true)}</div> | ||
| <div class="calendar-date">${this._getDayName(2, true)}</div> | ||
| <div class="calendar-date">${this._getDayName(3, true)}</div> | ||
| <div class="calendar-date">${this._getDayName(4, true)}</div> | ||
| <div class="calendar-date">${this._getDayName(5, true)}</div> | ||
| <div class="calendar-date">${this._getDayName(6, true)}</div> | ||
| </div> | ||
| <div class="calendar-body"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| this.datePickerContainer = document.createElement('div'); | ||
| this.datePickerContainer.id = 'datePicker' + ( new Date ).getTime(); | ||
| // Add datepicker HTML element to Document Body | ||
| document.body.insertAdjacentHTML('beforeend', datePicker); | ||
| // Save pointer to each DatePicker element for later use | ||
| this.datePickerContainer = document.getElementById(this._id); | ||
| this.datePickerCalendar = this.datePickerContainer.querySelector('.calendar'); | ||
| if (this.options.overlay) { | ||
| this.datePickerContainer.classList.add('modal'); | ||
| this.datePickerOverlay = this.datePickerContainer.querySelector('.modal-background'); | ||
| this.datePickerCloseButton = this.datePickerContainer.querySelector('.modal-close'); | ||
| } | ||
| this.datePickerContainer.classList.add('datepicker'); | ||
| this.datePickerCalendarNav = this.datePickerCalendar.querySelector('.calendar-nav'); | ||
| this.datePickerCalendarNavMonth = this.datePickerCalendar.querySelector('.calendar-month'); | ||
| this.datePickerCalendarNavPreviousMonth = this.datePickerCalendarNav.querySelector('.calendar-nav-previous-month'); | ||
| this.datePickerCalendarNavNextMonth = this.datePickerCalendarNav.querySelector('.calendar-nav-next-month'); | ||
| this.datePickerCalendarNavPreviousYear = this.datePickerCalendarNav.querySelector('.calendar-nav-previous-year'); | ||
| this.datePickerCalendarNavNextYear = this.datePickerCalendarNav.querySelector('.calendar-nav-next-year'); | ||
| this.datePickerCalendarHeader = this.datePickerCalendar.querySelector('.calendar-header'); | ||
| this.datePickerCalendarBody = this.datePickerCalendar.querySelector('.calendar-body'); | ||
| this._renderDays(); | ||
| } | ||
| this.calendarContainer = document.createElement('div'); | ||
| this.calendarContainer.id = 'datePicker' + ( new Date ).getTime(); | ||
| this.calendarContainer.classList.add('calendar'); | ||
| this.renderCalendar(); | ||
| /** | ||
| * Bind all events | ||
| * @method _bindEvents | ||
| * @return {void} | ||
| */ | ||
| _bindEvents() { | ||
| var _this = this; | ||
| // Bind event to element in order to display/hide DatePicker on click | ||
| this.element.addEventListener(this._clickEvent, function (e) { | ||
| e.preventDefault(); | ||
| if (_this.open) { | ||
| _this.hide(); | ||
| } else { | ||
| _this.show(); | ||
| } | ||
| }); | ||
| if (this.options.overlay) { | ||
| var datePickerOverlay = document.createElement('div'); | ||
| datePickerOverlay.classList.add('modal-background'); | ||
| this.datePickerContainer.appendChild(datePickerOverlay); | ||
| // Bind close event on Close button | ||
| if (this.datePickerCloseButton) { | ||
| this.datePickerCloseButton.addEventListener(this._clickEvent, function(e) { | ||
| e.preventDefault(); | ||
| _this.hide(); | ||
| }); | ||
| } | ||
| // Bind close event on overlay based on options | ||
| if (this.options.closeOnOverlayClick) { | ||
| this.datePickerOverlay.addEventListener(this._clickEvent, function(e) { | ||
| e.preventDefault(); | ||
| _this.hide(); | ||
| }); | ||
| } | ||
| } | ||
| var modalClose = document.createElement('button'); | ||
| modalClose.className = 'modal-close'; | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| modalClose.addEventListener(event, function(e) { | ||
| e.preventDefault(); | ||
| _this.datePickerContainer.classList.remove('is-active'); | ||
| }); | ||
| // Bind year navigation events | ||
| this.datePickerCalendarNavPreviousYear.addEventListener(this._clickEvent, function (e) { | ||
| e.preventDefault(); | ||
| _this.prevYear(); | ||
| }); | ||
| this.datePickerCalendarNavNextYear.addEventListener(this._clickEvent, function (e) { | ||
| e.preventDefault(); | ||
| _this.nextYear(); | ||
| }); | ||
| this.datePickerContainer.appendChild(this.calendarContainer); | ||
| this.datePickerContainer.appendChild(modalClose); | ||
| document.body.appendChild(this.datePickerContainer); | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| this.element.addEventListener(event, function (e) { | ||
| e.preventDefault(); | ||
| if (_this.open) { | ||
| _this.hide(); | ||
| _this.open = false; | ||
| } else { | ||
| _this.show(); | ||
| _this.open = true; | ||
| } | ||
| }); | ||
| // Bind month navigation events | ||
| this.datePickerCalendarNavPreviousMonth.addEventListener(this._clickEvent, function (e) { | ||
| e.preventDefault(); | ||
| _this.prevMonth(); | ||
| }); | ||
| this.datePickerCalendarNavNextMonth.addEventListener(this._clickEvent, function (e) { | ||
| e.preventDefault(); | ||
| _this.nextMonth(); | ||
| }); | ||
| } | ||
| /** | ||
| * templating functions to abstract HTML rendering | ||
| * Bind events on each Day item | ||
| * @method _bindDaysEvents | ||
| * @return {void} | ||
| */ | ||
| renderDayName(day, abbr = false) { | ||
| day += datepicker_langs[this.options.lang].weekStart; | ||
| while (day >= 7) { | ||
| day -= 7; | ||
| } | ||
| return abbr ? datepicker_langs[this.options.lang].weekdaysShort[day] : datepicker_langs[this.options.lang].weekdays[day]; | ||
| } | ||
| renderDay(day, month, year, isSelected, isToday, isDisabled, isEmpty, isBetween, isSelectedIn, isSelectedOut) { | ||
| _bindDaysEvents() { | ||
| var _this = this; | ||
| var newDayContainer = document.createElement('div'); | ||
| var newDayButton = document.createElement('button'); | ||
| newDayButton.classList.add('date-item'); | ||
| newDayButton.innerHTML = day; | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| newDayButton.addEventListener(event, function (e) { | ||
| [].forEach.call(this.datePickerCalendarDays, (calendarDay) => { | ||
| calendarDay.addEventListener(this._clickEvent, function(e) { | ||
| e.preventDefault(); | ||
| if (typeof _this.options.onSelect != 'undefined' && | ||
@@ -195,3 +280,4 @@ _this.options.onSelect != null && | ||
| } | ||
| _this.element.value = _this.getFormatedDate(( new Date(year, month, day) ), _this.options.dataFormat); | ||
| let date = this.dataset.date.split('/'); | ||
| _this.element.value = _this.getFormatedDate(( new Date(date[0], date[1], date[2]) ), _this.options.dataFormat); | ||
| if (_this.options.closeOnSelect) { | ||
@@ -202,146 +288,36 @@ _this.hide(); | ||
| }); | ||
| newDayContainer.classList.add('calendar-date'); | ||
| newDayContainer.appendChild(newDayButton); | ||
| if (isDisabled) { | ||
| newDayContainer.setAttribute('disabled', 'disabled'); | ||
| } | ||
| if (isToday) { | ||
| newDayContainer.classList.add('is-today'); | ||
| } | ||
| if (isSelected) { | ||
| newDayContainer.classList.add('is-active'); | ||
| } | ||
| if (isBetween) { | ||
| newDayContainer.classList.add('calendar-range'); | ||
| } | ||
| if (isSelectedIn) { | ||
| newDayContainer.classList.add('range-start'); | ||
| } | ||
| if (isSelectedOut) { | ||
| newDayContainer.classList.add('range-end'); | ||
| } | ||
| return newDayContainer; | ||
| } | ||
| renderNav(year, month) { | ||
| var _this = this; | ||
| var calendarNav = document.createElement('div'); | ||
| calendarNav.classList.add('calendar-nav'); | ||
| var previousButtonContainer = document.createElement('div'); | ||
| previousButtonContainer.classList.add('calendar-nav-left'); | ||
| this.previousYearButton = document.createElement('div'); | ||
| this.previousYearButton.classList.add('button'); | ||
| this.previousYearButton.classList.add('is-text'); | ||
| var previousButtonIcon = document.createElement('i'); | ||
| previousButtonIcon.classList.add('fa'); | ||
| previousButtonIcon.classList.add('fa-backward'); | ||
| this.previousYearButton.appendChild(previousButtonIcon); | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| this.previousYearButton.addEventListener(event, function (e) { | ||
| e.preventDefault(); | ||
| _this.prevYear(); | ||
| }); | ||
| }); | ||
| previousButtonContainer.appendChild(this.previousYearButton); | ||
| this.previousMonthButton = document.createElement('div'); | ||
| this.previousMonthButton.classList.add('button'); | ||
| this.previousMonthButton.classList.add('is-text'); | ||
| var previousMonthButtonIcon = document.createElement('i'); | ||
| previousMonthButtonIcon.classList.add('fa'); | ||
| previousMonthButtonIcon.classList.add('fa-chevron-left'); | ||
| this.previousMonthButton.appendChild(previousMonthButtonIcon); | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| this.previousMonthButton.addEventListener(event, function (e) { | ||
| e.preventDefault(); | ||
| _this.prevMonth(); | ||
| }); | ||
| }); | ||
| previousButtonContainer.appendChild(this.previousMonthButton); | ||
| var calendarTitle = document.createElement('div'); | ||
| calendarTitle.innerHTML = datepicker_langs[this.options.lang].months[month] + ' ' + year; | ||
| var nextButtonContainer = document.createElement('div'); | ||
| nextButtonContainer.classList.add('calendar-nav-right'); | ||
| this.nextMonthButton = document.createElement('div'); | ||
| this.nextMonthButton.classList.add('button'); | ||
| this.nextMonthButton.classList.add('is-text'); | ||
| var nextMonthButtonIcon = document.createElement('i'); | ||
| nextMonthButtonIcon.classList.add('fa'); | ||
| nextMonthButtonIcon.classList.add('fa-chevron-right'); | ||
| this.nextMonthButton.appendChild(nextMonthButtonIcon); | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| this.nextMonthButton.addEventListener(event, function (e) { | ||
| e.preventDefault(); | ||
| _this.nextMonth(); | ||
| }); | ||
| }); | ||
| nextButtonContainer.appendChild(this.nextMonthButton); | ||
| this.nextYearButton = document.createElement('div'); | ||
| this.nextYearButton.classList.add('button'); | ||
| this.nextYearButton.classList.add('is-text'); | ||
| var nextYearButtonIcon = document.createElement('i'); | ||
| nextYearButtonIcon.classList.add('fa'); | ||
| nextYearButtonIcon.classList.add('fa-forward'); | ||
| this.nextYearButton.appendChild(nextYearButtonIcon); | ||
| MOUSE_EVENTS.forEach((event) => { | ||
| this.nextYearButton.addEventListener('click', function (e) { | ||
| e.preventDefault(); | ||
| _this.nextYear(); | ||
| }); | ||
| }); | ||
| nextButtonContainer.appendChild(this.nextYearButton); | ||
| calendarNav.appendChild(previousButtonContainer); | ||
| calendarNav.appendChild(calendarTitle); | ||
| calendarNav.appendChild(nextButtonContainer); | ||
| return calendarNav; | ||
| } | ||
| renderHeader() { | ||
| var calendarHeader = document.createElement('div'); | ||
| calendarHeader.classList.add('calendar-header'); | ||
| for (var i = 0; i < 7; i++) { | ||
| var newDay = document.createElement('div'); | ||
| newDay.classList.add('calendar-date'); | ||
| newDay.innerHTML = this.renderDayName(i, true); | ||
| calendarHeader.appendChild(newDay); | ||
| /** | ||
| * Get localized day name | ||
| * @method renderDayName | ||
| * @param {[type]} day [description] | ||
| * @param {Boolean} [abbr=false] [description] | ||
| * @return {[type]} [description] | ||
| */ | ||
| _getDayName(day, abbr = false) { | ||
| day += datepicker_langs[this.options.lang].weekStart; | ||
| while (day >= 7) { | ||
| day -= 7; | ||
| } | ||
| return calendarHeader; | ||
| return abbr ? datepicker_langs[this.options.lang].weekdaysShort[day] : datepicker_langs[this.options.lang].weekdays[day]; | ||
| } | ||
| renderBody() { | ||
| var calendarBody = document.createElement('div'); | ||
| calendarBody.classList.add('calendar-body'); | ||
| return calendarBody; | ||
| _renderDay(day, month, year, isSelected, isToday, isDisabled, isEmpty, isBetween, isSelectedIn, isSelectedOut) { | ||
| return ` | ||
| <div data-date="${`${year}/${month}/${day}`}" class="calendar-date${isDisabled ? ' is-disabled' : ''}${isBetween ? ' calendar-range' : ''}${isSelectedIn ? ' calendar-range-start' : ''}${isSelectedOut ? ' calendar-range-end' : ''}"> | ||
| <button class="date-item${isToday ? ' is-today' : ''}${isSelected ? ' is-active' : ''}">${day}</button> | ||
| </div> | ||
| `; | ||
| } | ||
| renderCalendar() { | ||
| var now = new Date(); | ||
| _renderDays() { | ||
| const now = new Date(); | ||
| let days = ''; | ||
| var calendarNav = this.renderNav(this.year, this.month); | ||
| var calendarHeader = this.renderHeader(); | ||
| var calendarBody = this.renderBody(); | ||
| this.calendarContainer.appendChild(calendarNav); | ||
| this.calendarContainer.appendChild(calendarHeader); | ||
| this.calendarContainer.appendChild(calendarBody); | ||
| var days = this.getDaysInMonth(this.year, this.month), | ||
| let numberOfDays = this.getDaysInMonth(this.year, this.month), | ||
| before = new Date(this.year, this.month, 1).getDay(); | ||
| // Call onRender callback if defined | ||
| if (typeof this.options.onRender != 'undefined' && | ||
@@ -353,2 +329,3 @@ this.options.onRender != null && | ||
| // Get start day from options | ||
| if (datepicker_langs[this.options.lang].weekStart > 0) { | ||
@@ -361,3 +338,3 @@ before -= datepicker_langs[this.options.lang].weekStart; | ||
| var cells = days + before, | ||
| let cells = numberOfDays + before, | ||
| after = cells; | ||
@@ -375,4 +352,4 @@ while (after > 7) { | ||
| isSelectedOut = false, | ||
| isToday = this.compareDates(day, now), | ||
| isEmpty = i < before || i >= ( days + before ), | ||
| isToday = this._compareDates(day, now), | ||
| isEmpty = i < before || i >= ( numberOfDays + before ), | ||
| isDisabled = false; | ||
@@ -389,30 +366,59 @@ | ||
| calendarBody.appendChild(this.renderDay(day.getDate(), this.month, this.year, isSelected, isToday, isDisabled, isEmpty, isBetween, isSelectedIn, isSelectedOut)); | ||
| days += this._renderDay(day.getDate(), this.month, this.year, isSelected, isToday, isDisabled, isEmpty, isBetween, isSelectedIn, isSelectedOut); | ||
| } | ||
| this.datePickerCalendarBody.insertAdjacentHTML('beforeend', days); | ||
| this.datePickerCalendarDays = this.datePickerCalendarBody.querySelectorAll('.calendar-date'); | ||
| this._bindDaysEvents(); | ||
| } | ||
| /** | ||
| * Navigate to the previous month and regenerate calendar | ||
| * @method prevMonth | ||
| * @return {void} | ||
| */ | ||
| prevMonth() { | ||
| this.month -= 1; | ||
| this.adjustCalendar(); | ||
| this.renderCalendar(); | ||
| this._renderDays(); | ||
| } | ||
| /** | ||
| * Navigate to the next month and regenerate calendar | ||
| * @method nextMonth | ||
| * @return {} | ||
| */ | ||
| nextMonth() { | ||
| this.month += 1; | ||
| this.adjustCalendar(); | ||
| this.renderCalendar(); | ||
| this._renderDays(); | ||
| } | ||
| /** | ||
| * Navigate to the previous year and regenerate calendar | ||
| * @method prevYear | ||
| * @return {void} | ||
| */ | ||
| prevYear() { | ||
| this.year -= 1; | ||
| this.adjustCalendar(); | ||
| this.renderCalendar(); | ||
| this._renderDays(); | ||
| } | ||
| /** | ||
| * Navigate to the previous year and regenerate calendar | ||
| * @method nextYear | ||
| * @return {} | ||
| */ | ||
| nextYear() { | ||
| this.year += 1; | ||
| this.adjustCalendar(); | ||
| this.renderCalendar(); | ||
| this._renderDays(); | ||
| } | ||
| /** | ||
| * Show DatePicker HTML Component | ||
| * @method show | ||
| * @return {void} | ||
| */ | ||
| show() { | ||
@@ -431,2 +437,7 @@ if (typeof this.options.onOpen != 'undefined' && | ||
| /** | ||
| * Hide DatePicker HTML Component | ||
| * @method hide | ||
| * @return {void} | ||
| */ | ||
| hide() { | ||
@@ -451,9 +462,15 @@ this.open = false; | ||
| } | ||
| this.calendarContainer.innerHTML = ''; | ||
| this.datePickerCalendarNavMonth.innerHTML = datepicker_langs[this.options.lang].months[this.month] + ' ' + this.year; | ||
| this.datePickerCalendarBody.innerHTML = ''; | ||
| return this; | ||
| } | ||
| /** | ||
| * Recalculate calendar position | ||
| * @method adjustPosition | ||
| * @return {void} | ||
| */ | ||
| adjustPosition() { | ||
| var width = this.calendarContainer.offsetWidth, | ||
| height = this.calendarContainer.offsetHeight, | ||
| var width = this.datePickerCalendar.offsetWidth, | ||
| height = this.datePickerCalendar.offsetHeight, | ||
| viewportWidth = window.innerWidth || document.documentElement.clientWidth, | ||
@@ -477,9 +494,14 @@ viewportHeight = window.innerHeight || document.documentElement.clientHeight, | ||
| this.calendarContainer.style.position = 'absolute'; | ||
| this.calendarContainer.style.left = left + 'px'; | ||
| this.calendarContainer.style.top = top + 'px'; | ||
| this.datePickerCalendar.style.position = 'absolute'; | ||
| this.datePickerCalendar.style.left = left + 'px'; | ||
| this.datePickerCalendar.style.top = top + 'px'; | ||
| } | ||
| /** | ||
| * Destroy DatePicker | ||
| * @method destroy | ||
| * @return {[type]} [description] | ||
| */ | ||
| destroy() { | ||
| this.calendarContainer.remove(); | ||
| this.datePickerCalendar.remove(); | ||
| } | ||
@@ -489,3 +511,3 @@ | ||
| * Returns date according to passed format | ||
| * | ||
| * @method getFormatedDate | ||
| * @param {Date} dt Date object | ||
@@ -528,10 +550,16 @@ * @param {String} format Format string | ||
| /** | ||
| * Returns true if date picker is visible now | ||
| * | ||
| * Returns true if DatePicker is active | ||
| * @method isActive | ||
| * @returns {Boolean} | ||
| */ | ||
| isActive() { | ||
| return this.calendarContainer.classList.contains('is-active'); | ||
| return this.datePickerCalendar.classList.contains('is-active'); | ||
| } | ||
| /** | ||
| * Check if Object is a Date | ||
| * @method isDate | ||
| * @param {Object} obj Object to check | ||
| * @return {Boolean} True if Object is a Date then False | ||
| */ | ||
| isDate(obj) { | ||
@@ -541,2 +569,8 @@ return ( /Date/ ).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime()); | ||
| /** | ||
| * Check if given year is LeapYear or not | ||
| * @method isLeapYear | ||
| * @param {Integer} year Year to check | ||
| * @return {Boolean} True if LeapYear then False | ||
| */ | ||
| isLeapYear(year) { | ||
@@ -547,2 +581,9 @@ // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951 | ||
| /** | ||
| * Get the number of days in month | ||
| * @method getDaysInMonth | ||
| * @param {Integer} year Year to check if we are facing a leapyear or not | ||
| * @param {Integer} month Month for which we want to know the amount of days | ||
| * @return {Integer} Days amount | ||
| */ | ||
| getDaysInMonth(year, month) { | ||
@@ -552,6 +593,15 @@ return [31, this.isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; | ||
| compareDates(a, b) { | ||
| // weak date comparison (use setToStartOfDay(date) to ensure correct result) | ||
| /** | ||
| * Compare two dates | ||
| * @method _compareDates | ||
| * @param {Date} a First date to compare | ||
| * @param {Date} b Second Date to compare with | ||
| * @return {Boolean} True if dates are equal then false | ||
| */ | ||
| _compareDates(a, b) { | ||
| // weak date comparison | ||
| a.setHours(0,0,0,0); | ||
| b.setHours(0,0,0,0); | ||
| return a.getTime() === b.getTime(); | ||
| } | ||
| } |
@@ -1,3 +0,3 @@ | ||
| var $jscomp={scope:{},owns:function(a,c){return Object.prototype.hasOwnProperty.call(a,c)}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(a,c,b){if(b.get||b.set)throw new TypeError("ES3 does not support getters and setters.");a!=Array.prototype&&a!=Object.prototype&&(a[c]=b.value)};$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this); | ||
| $jscomp.polyfill=function(a,c,b,e){if(c){b=$jscomp.global;a=a.split(".");for(e=0;e<a.length-1;e++){var f=a[e];f in b||(b[f]={});b=b[f]}a=a[a.length-1];e=b[a];c=c(e);c!=e&&null!=c&&$jscomp.defineProperty(b,a,{configurable:!0,writable:!0,value:c})}};$jscomp.polyfill("Object.assign",function(a){return a?a:function(a,b){for(var c=1;c<arguments.length;c++){var f=arguments[c];if(f)for(var g in f)$jscomp.owns(f,g)&&(a[g]=f[g])}return a}},"es6-impl","es3"); | ||
| var $jscomp={scope:{},owns:function(a,b){return Object.prototype.hasOwnProperty.call(a,b)}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(c.get||c.set)throw new TypeError("ES3 does not support getters and setters.");a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this); | ||
| $jscomp.polyfill=function(a,b,c,d){if(b){c=$jscomp.global;a=a.split(".");for(d=0;d<a.length-1;d++){var f=a[d];f in c||(c[f]={});c=c[f]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:b})}};$jscomp.polyfill("Object.assign",function(a){return a?a:function(a,c){for(var b=1;b<arguments.length;b++){var f=arguments[b];if(f)for(var e in f)$jscomp.owns(f,e)&&(a[e]=f[e])}return a}},"es6-impl","es3"); | ||
| var datepicker_langs={en:{weekStart:1,previousMonth:"Previous Month",nextMonth:"Next Month",months:"January February March April May June July August September October November December".split(" "),monthsShort:"Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" "),weekdays:"Sunday Monday Tuesday Wednesday Thursday Friday Saturday".split(" "),weekdaysShort:"Sun Mon Tue Wed Thu Fri Sat".split(" ")},fr:{weekStart:1,previousMonth:"Mois pr\u00e9c\u00e9dent",nextMonth:"Mois suivant",months:"Janvier F\u00e9vrier Mars Avril Mai Juin Juillet Ao\u00fbt Septembre Octobre Novembre D\u00e9cembre".split(" "), | ||
@@ -10,22 +10,27 @@ monthsShort:"Jan F\u00e9v Mar Avr Mai Juin Juil Auo Sep Oct Nov D\u00e9c".split(" "),weekdays:"Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi".split(" "),weekdaysShort:"Dim Lun Mar Mer Jeu Ven Sam".split(" ")},de:{weekStart:1,previousMonth:"Vorheriger Monat",nextMonth:"N\u00e4chster Monat",months:"Januar Februar M\u00e4rz April Mai Juni Juli August September Oktober November Dezember".split(" "),monthsShort:"Jan Febr M\u00e4rz Apr Mai Juni Juli Aug Sept Okt Nov Dez".split(" "),weekdays:"Sonntag Montag Dienstag Mittwoch Donnerstag Freitag Samstag".split(" "), | ||
| hr:{weekStart:2,previousMonth:"Pro\u0161li mjesec",nextMonth:"Slijede\u0107i mjesec",months:"sije\u010danj velja\u010da o\u017eujak travanj svibanj lipanj srpanj kolovoz rujan listopad studeni prosinac".split(" "),monthsShort:"sij velj o\u017eu tra svi lip srp kol ruj lis stu pro".split(" "),weekdays:"nedjelja ponedjeljak utorak srijeda \u010detvrtak petak subota".split(" "),weekdaysShort:"ned pon uto sri \u010det pet sub".split(" ")},sr:{weekStart:2,previousMonth:"Pro\u0161li mesec",nextMonth:"Slede\u0107i mesec", | ||
| months:"januar februar mart april maj jun jul avgust septembar oktobar novembar decembar".split(" "),monthsShort:"jan feb mar apr maj jun jul avg sep okt nov dec".split(" "),weekdays:"nedelja ponedeljak utorak sreda \u010detvrtak petak subota".split(" "),weekdaysShort:"ned pon uto sre \u010det pet sub".split(" ")}},MOUSE_EVENTS=["click","touchstart"],DatePicker=function(a,c){c||(c={});var b={startDate:new Date,dataFormat:"yyyy/mm/dd",lang:"en",overlay:!1,closeOnSelect:!0,onSelect:null,onOpen:null, | ||
| onClose:null,onRender:null};this.element="string"===typeof a?document.querySelector(a):a;if(!this.element)throw Error("An invalid selector or non-DOM node has been provided.");this.parent=this.element.parentElement;this.lang="undefined"!==typeof datepicker_langs[this.lang]?this.lang:"en";this.options=Object.assign({},b,c);this.month=this.options.startDate.getMonth();this.year=this.options.startDate.getFullYear();this.open=!1;this.build()}; | ||
| DatePicker.prototype.build=function(){var a=this,c=this;this.datePickerContainer=document.createElement("div");this.datePickerContainer.id="datePicker"+(new Date).getTime();this.options.overlay&&this.datePickerContainer.classList.add("modal");this.datePickerContainer.classList.add("datepicker");this.calendarContainer=document.createElement("div");this.calendarContainer.id="datePicker"+(new Date).getTime();this.calendarContainer.classList.add("calendar");this.renderCalendar();if(this.options.overlay){var b= | ||
| document.createElement("div");b.classList.add("modal-background");this.datePickerContainer.appendChild(b)}var e=document.createElement("button");e.className="modal-close";MOUSE_EVENTS.forEach(function(a){e.addEventListener(a,function(a){a.preventDefault();c.datePickerContainer.classList.remove("is-active")})});this.datePickerContainer.appendChild(this.calendarContainer);this.datePickerContainer.appendChild(e);document.body.appendChild(this.datePickerContainer);MOUSE_EVENTS.forEach(function(b){a.element.addEventListener(b, | ||
| function(a){a.preventDefault();c.open?(c.hide(),c.open=!1):(c.show(),c.open=!0)})})};DatePicker.prototype.renderDayName=function(a,c){for(a+=datepicker_langs[this.options.lang].weekStart;7<=a;)a-=7;return(void 0===c?0:c)?datepicker_langs[this.options.lang].weekdaysShort[a]:datepicker_langs[this.options.lang].weekdays[a]}; | ||
| DatePicker.prototype.renderDay=function(a,c,b,e,f,g,d,l,h,m){var k=this;d=document.createElement("div");var n=document.createElement("button");n.classList.add("date-item");n.innerHTML=a;MOUSE_EVENTS.forEach(function(e){n.addEventListener(e,function(e){if("undefined"!=typeof k.options.onSelect&&null!=k.options.onSelect&&k.options.onSelect)k.options.onSelect(new Date(b,c,a));k.element.value=k.getFormatedDate(new Date(b,c,a),k.options.dataFormat);k.options.closeOnSelect&&k.hide()})});d.classList.add("calendar-date"); | ||
| d.appendChild(n);g&&d.setAttribute("disabled","disabled");f&&d.classList.add("is-today");e&&d.classList.add("is-active");l&&d.classList.add("calendar-range");h&&d.classList.add("range-start");m&&d.classList.add("range-end");return d}; | ||
| DatePicker.prototype.renderNav=function(a,c){var b=this,e=this,f=document.createElement("div");f.classList.add("calendar-nav");var g=document.createElement("div");g.classList.add("calendar-nav-left");this.previousYearButton=document.createElement("div");this.previousYearButton.classList.add("button");this.previousYearButton.classList.add("is-text");var d=document.createElement("i");d.classList.add("fa");d.classList.add("fa-backward");this.previousYearButton.appendChild(d);MOUSE_EVENTS.forEach(function(a){b.previousYearButton.addEventListener(a, | ||
| function(a){a.preventDefault();e.prevYear()})});g.appendChild(this.previousYearButton);this.previousMonthButton=document.createElement("div");this.previousMonthButton.classList.add("button");this.previousMonthButton.classList.add("is-text");d=document.createElement("i");d.classList.add("fa");d.classList.add("fa-chevron-left");this.previousMonthButton.appendChild(d);MOUSE_EVENTS.forEach(function(a){b.previousMonthButton.addEventListener(a,function(a){a.preventDefault();e.prevMonth()})});g.appendChild(this.previousMonthButton); | ||
| d=document.createElement("div");d.innerHTML=datepicker_langs[this.options.lang].months[c]+" "+a;var l=document.createElement("div");l.classList.add("calendar-nav-right");this.nextMonthButton=document.createElement("div");this.nextMonthButton.classList.add("button");this.nextMonthButton.classList.add("is-text");var h=document.createElement("i");h.classList.add("fa");h.classList.add("fa-chevron-right");this.nextMonthButton.appendChild(h);MOUSE_EVENTS.forEach(function(a){b.nextMonthButton.addEventListener(a, | ||
| function(a){a.preventDefault();e.nextMonth()})});l.appendChild(this.nextMonthButton);this.nextYearButton=document.createElement("div");this.nextYearButton.classList.add("button");this.nextYearButton.classList.add("is-text");h=document.createElement("i");h.classList.add("fa");h.classList.add("fa-forward");this.nextYearButton.appendChild(h);MOUSE_EVENTS.forEach(function(a){b.nextYearButton.addEventListener("click",function(a){a.preventDefault();e.nextYear()})});l.appendChild(this.nextYearButton);f.appendChild(g); | ||
| f.appendChild(d);f.appendChild(l);return f};DatePicker.prototype.renderHeader=function(){var a=document.createElement("div");a.classList.add("calendar-header");for(var c=0;7>c;c++){var b=document.createElement("div");b.classList.add("calendar-date");b.innerHTML=this.renderDayName(c,!0);a.appendChild(b)}return a};DatePicker.prototype.renderBody=function(){var a=document.createElement("div");a.classList.add("calendar-body");return a}; | ||
| DatePicker.prototype.renderCalendar=function(){var a=new Date,c=this.renderNav(this.year,this.month),b=this.renderHeader(),e=this.renderBody();this.calendarContainer.appendChild(c);this.calendarContainer.appendChild(b);this.calendarContainer.appendChild(e);c=this.getDaysInMonth(this.year,this.month);b=(new Date(this.year,this.month,1)).getDay();if("undefined"!=typeof this.options.onRender&&null!=this.options.onRender&&this.options.onRender)this.options.onRender(this);0<datepicker_langs[this.options.lang].weekStart&& | ||
| (b-=datepicker_langs[this.options.lang].weekStart,0>b&&(b+=7));for(var f=c+b,g=f;7<g;)g-=7;f+=7-g;for(g=0;g<f;g++){var d=new Date(this.year,this.month,1+(g-b)),l=this.compareDates(d,a),h=g<b||g>=c+b,m=!1;d.getMonth()!==this.month&&(m=!0);e.appendChild(this.renderDay(d.getDate(),this.month,this.year,!1,l,m,h,!1,!1,!1))}};DatePicker.prototype.prevMonth=function(){--this.month;this.adjustCalendar();this.renderCalendar()};DatePicker.prototype.nextMonth=function(){this.month+=1;this.adjustCalendar();this.renderCalendar()}; | ||
| DatePicker.prototype.prevYear=function(){--this.year;this.adjustCalendar();this.renderCalendar()};DatePicker.prototype.nextYear=function(){this.year+=1;this.adjustCalendar();this.renderCalendar()};DatePicker.prototype.show=function(){if("undefined"!=typeof this.options.onOpen&&null!=this.options.onOpen&&this.options.onOpen)this.options.onOpen(this);this.datePickerContainer.classList.add("is-active");this.options.overlay||this.adjustPosition();this.open=!0}; | ||
| DatePicker.prototype.hide=function(){this.open=!1;if("undefined"!=typeof this.options.onClose&&null!=this.options.onClose&&this.options.onClose)this.options.onClose(this);this.datePickerContainer.classList.remove("is-active")};DatePicker.prototype.adjustCalendar=function(){0>this.month&&(this.year-=Math.ceil(Math.abs(this.month)/12),this.month+=12);11<this.month&&(this.year+=Math.floor(Math.abs(this.month)/12),this.month-=12);this.calendarContainer.innerHTML="";return this}; | ||
| DatePicker.prototype.adjustPosition=function(){var a,c;if("function"===typeof this.element.getBoundingClientRect)c=this.element.getBoundingClientRect(),a=c.left+window.pageXOffset,c=c.bottom+window.pageYOffset;else for(a=this.element.offsetLeft,c=this.element.offsetTop+this.element.offsetHeight;this.element=this.element.offsetParent;)a+=this.element.offsetLeft,c+=this.element.offsetTop;this.calendarContainer.style.position="absolute";this.calendarContainer.style.left=a+"px";this.calendarContainer.style.top= | ||
| c+"px"};DatePicker.prototype.destroy=function(){this.calendarContainer.remove()}; | ||
| DatePicker.prototype.getFormatedDate=function(a,c){var b={d:a.getDate(),dd:a.getDate(),D:a.getDay(),m:a.getMonth()+1,mm:a.getMonth()+1,M:a.getMonth(),MM:a.getMonth(),yy:a.getFullYear().toString().substr(-2),yyyy:a.getFullYear()};10>b.dd&&(b.dd="0"+b.dd);10>b.mm&&(b.mm="0"+b.mm);b.D=datepicker_langs[this.options.lang].weekdays[b.D?b.D-1:6];b.M=datepicker_langs[this.options.lang].monthsShort[b.M];b.MM=datepicker_langs[this.options.lang].months[b.MM];return c.replace(/(?:[dmM]{1,2}|D|yyyy|yy)/g,function(a){return"undefined"!== | ||
| typeof b[a]?b[a]:a})};DatePicker.prototype.isActive=function(){return this.calendarContainer.classList.contains("is-active")};DatePicker.prototype.isDate=function(a){return/Date/.test(Object.prototype.toString.call(a))&&!isNaN(a.getTime())};DatePicker.prototype.isLeapYear=function(a){return 0===a%4&&0!==a%100||0===a%400};DatePicker.prototype.getDaysInMonth=function(a,c){return[31,this.isLeapYear(a)?29:28,31,30,31,30,31,31,30,31,30,31][c]}; | ||
| DatePicker.prototype.compareDates=function(a,c){return a.getTime()===c.getTime()}; | ||
| months:"januar februar mart april maj jun jul avgust septembar oktobar novembar decembar".split(" "),monthsShort:"jan feb mar apr maj jun jul avg sep okt nov dec".split(" "),weekdays:"nedelja ponedeljak utorak sreda \u010detvrtak petak subota".split(" "),weekdaysShort:"ned pon uto sre \u010det pet sub".split(" ")},"zh-cn":{weekStart:1,previousMonth:"\u4e0a\u4e2a\u6708",nextMonth:"\u4e0b\u4e2a\u6708",months:"\u4e00\u6708 \u4e8c\u6708 \u4e09\u6708 \u56db\u6708 \u4e94\u6708 \u516d\u6708 \u4e03\u6708 \u516b\u6708 \u4e5d\u6708 \u5341\u6708 \u5341\u4e00\u6708 \u5341\u4e8c\u6708".split(" "), | ||
| monthsShort:"\u4e00\u6708 \u4e8c\u6708 \u4e09\u6708 \u56db\u6708 \u4e94\u6708 \u516d\u6708 \u4e03\u6708 \u516b\u6708 \u4e5d\u6708 \u5341\u6708 \u5341\u4e00\u6708 \u5341\u4e8c\u6708".split(" "),weekdays:"\u661f\u671f\u5929 \u661f\u671f\u4e00 \u661f\u671f\u4e8c \u661f\u671f\u4e09 \u661f\u671f\u56db \u661f\u671f\u4e94 \u661f\u671f\u516d".split(" "),weekdaysShort:"\u5468\u65e5 \u5468\u4e00 \u5468\u4e8c \u5468\u4e09 \u5468\u56db \u5468\u4e94 \u5468\u516d".split(" ")}},DatePicker=function(a,b){b=void 0=== | ||
| b?{}:b;this._clickEvent="ontouchstart"in window?"touchstart":"click";this.element="string"===typeof a?document.querySelector(a):a;if(!this.element)throw Error("An invalid selector or non-DOM node has been provided.");this.options=Object.assign({},{startDate:new Date,dataFormat:"yyyy/mm/dd",lang:"en",overlay:!1,closeOnOverlayClick:!0,closeOnSelect:!0,onSelect:null,onOpen:null,onClose:null,onRender:null},b);this._init()}; | ||
| DatePicker.prototype._init=function(){this._id="datePicker"+(new Date).getTime();this.lang="undefined"!==typeof datepicker_langs[this.lang]?this.lang:"en";this.month=this.options.startDate.getMonth();this.year=this.options.startDate.getFullYear();this.open=!1;this._build();this._bindEvents();return this}; | ||
| DatePicker.prototype._build=function(){var a="\n <div id='"+this._id+"' class=\"datepicker "+(this.options.overlay?"modal":"")+'">\n '+(this.options.overlay?'<div class="modal-background"></div>':"")+'\n <div class="calendar">\n <div class="calendar-nav">\n <div class="calendar-nav-previous-year">\n <button class="button is-small is-text">\n <i class="fa fa-chevron-left"></i>\n </button>\n </div>\n <div class="calendar-nav-previous-month">\n <button class="button is-small is-text">\n <i class="fa fa-chevron-left"></i>\n </button>\n </div>\n <div class="calendar-month">'+ | ||
| (datepicker_langs[this.options.lang].months[this.month]+" "+this.year)+'</div>\n <div class="calendar-nav-next-month">\n <button class="button is-small is-text">\n <i class="fa fa-chevron-right"></i>\n </button>\n </div>\n <div class="calendar-nav-next-year">\n <button class="button is-small is-text">\n <i class="fa fa-chevron-right"></i>\n </button>\n </div>\n </div>\n <div class="calendar-container">\n <div class="calendar-header">\n <div class="calendar-date">'+ | ||
| this._getDayName(0,!0)+'</div>\n <div class="calendar-date">'+this._getDayName(1,!0)+'</div>\n <div class="calendar-date">'+this._getDayName(2,!0)+'</div>\n <div class="calendar-date">'+this._getDayName(3,!0)+'</div>\n <div class="calendar-date">'+this._getDayName(4,!0)+'</div>\n <div class="calendar-date">'+this._getDayName(5,!0)+'</div>\n <div class="calendar-date">'+this._getDayName(6,!0)+'</div>\n </div>\n <div class="calendar-body"></div>\n </div>\n </div>\n </div>\n '; | ||
| document.body.insertAdjacentHTML("beforeend",a);this.datePickerContainer=document.getElementById(this._id);this.datePickerCalendar=this.datePickerContainer.querySelector(".calendar");this.options.overlay&&(this.datePickerOverlay=this.datePickerContainer.querySelector(".modal-background"),this.datePickerCloseButton=this.datePickerContainer.querySelector(".modal-close"));this.datePickerCalendarNav=this.datePickerCalendar.querySelector(".calendar-nav");this.datePickerCalendarNavMonth=this.datePickerCalendar.querySelector(".calendar-month"); | ||
| this.datePickerCalendarNavPreviousMonth=this.datePickerCalendarNav.querySelector(".calendar-nav-previous-month");this.datePickerCalendarNavNextMonth=this.datePickerCalendarNav.querySelector(".calendar-nav-next-month");this.datePickerCalendarNavPreviousYear=this.datePickerCalendarNav.querySelector(".calendar-nav-previous-year");this.datePickerCalendarNavNextYear=this.datePickerCalendarNav.querySelector(".calendar-nav-next-year");this.datePickerCalendarHeader=this.datePickerCalendar.querySelector(".calendar-header"); | ||
| this.datePickerCalendarBody=this.datePickerCalendar.querySelector(".calendar-body");this._renderDays()}; | ||
| DatePicker.prototype._bindEvents=function(){var a=this;document.addEventListener(this._clickEvent,function(b){b.stopPropagation();a.hide()});this.element.addEventListener(this._clickEvent,function(b){b.preventDefault();b.stopPropagation();a.open?a.hide():a.show()});this.options.overlay&&(this.datePickerCloseButton&&this.datePickerCloseButton.addEventListener(this._clickEvent,function(b){b.preventDefault();a.hide()}),this.options.closeOnOverlayClick&&this.datePickerOverlay.addEventListener(this._clickEvent, | ||
| function(b){b.preventDefault();a.hide()}));this.datePickerCalendarNavPreviousYear.addEventListener(this._clickEvent,function(b){b.preventDefault();b.stopPropagation();a.prevYear()});this.datePickerCalendarNavNextYear.addEventListener(this._clickEvent,function(b){b.preventDefault();b.stopPropagation();a.nextYear()});this.datePickerCalendarNavPreviousMonth.addEventListener(this._clickEvent,function(b){b.preventDefault();b.stopPropagation();a.prevMonth()});this.datePickerCalendarNavNextMonth.addEventListener(this._clickEvent, | ||
| function(b){b.preventDefault();b.stopPropagation();a.nextMonth()})}; | ||
| DatePicker.prototype._bindDaysEvents=function(){var a=this,b=this;[].forEach.call(this.datePickerCalendarDays,function(c){c.addEventListener(a._clickEvent,function(a){a.preventDefault();a.stopPropagation();if("undefined"!=typeof b.options.onSelect&&null!=b.options.onSelect&&b.options.onSelect)b.options.onSelect(new Date(year,month,day));a=this.dataset.date.split("/");b.element.value=b.getFormatedDate(new Date(a[0],a[1],a[2]),b.options.dataFormat);b.options.closeOnSelect&&b.hide()})})}; | ||
| DatePicker.prototype._getDayName=function(a,b){for(a+=datepicker_langs[this.options.lang].weekStart;7<=a;)a-=7;return(void 0===b?0:b)?datepicker_langs[this.options.lang].weekdaysShort[a]:datepicker_langs[this.options.lang].weekdays[a]}; | ||
| DatePicker.prototype._renderDay=function(a,b,c,d,f,e,g,k,l,h){return'\n <div data-date="'+(c+"/"+b+"/"+a)+'" class="calendar-date'+(e?" is-disabled":"")+(k?" calendar-range":"")+(l?" calendar-range-start":"")+(h?" calendar-range-end":"")+'">\n <button class="date-item'+(f?" is-today":"")+(d?" is-active":"")+'">'+a+"</button>\n </div>\n "}; | ||
| DatePicker.prototype._renderDays=function(){var a=new Date,b="",c=this.getDaysInMonth(this.year,this.month),d=(new Date(this.year,this.month,1)).getDay();if("undefined"!=typeof this.options.onRender&&null!=this.options.onRender&&this.options.onRender)this.options.onRender(this);0<datepicker_langs[this.options.lang].weekStart&&(d-=datepicker_langs[this.options.lang].weekStart,0>d&&(d+=7));for(var f=c+d,e=f;7<e;)e-=7;f+=7-e;for(e=0;e<f;e++){var g=new Date(this.year,this.month,1+(e-d)),k=this._compareDates(g, | ||
| a),l=e<d||e>=c+d,h=!1;g.getMonth()!==this.month&&(h=!0);b+=this._renderDay(g.getDate(),this.month,this.year,!1,k,h,l,!1,!1,!1)}this.datePickerCalendarBody.insertAdjacentHTML("beforeend",b);this.datePickerCalendarDays=this.datePickerCalendarBody.querySelectorAll(".calendar-date");this._bindDaysEvents()};DatePicker.prototype.prevMonth=function(){--this.month;this.adjustCalendar();this._renderDays()};DatePicker.prototype.nextMonth=function(){this.month+=1;this.adjustCalendar();this._renderDays()}; | ||
| DatePicker.prototype.prevYear=function(){--this.year;this.adjustCalendar();this._renderDays()};DatePicker.prototype.nextYear=function(){this.year+=1;this.adjustCalendar();this._renderDays()};DatePicker.prototype.show=function(){if("undefined"!=typeof this.options.onOpen&&null!=this.options.onOpen&&this.options.onOpen)this.options.onOpen(this);this.datePickerContainer.classList.add("is-active");this.options.overlay||this.adjustPosition();this.open=!0}; | ||
| DatePicker.prototype.hide=function(){this.open=!1;if("undefined"!=typeof this.options.onClose&&null!=this.options.onClose&&this.options.onClose)this.options.onClose(this);this.datePickerContainer.classList.remove("is-active")}; | ||
| DatePicker.prototype.adjustCalendar=function(){0>this.month&&(this.year-=Math.ceil(Math.abs(this.month)/12),this.month+=12);11<this.month&&(this.year+=Math.floor(Math.abs(this.month)/12),this.month-=12);this.datePickerCalendarNavMonth.innerHTML=datepicker_langs[this.options.lang].months[this.month]+" "+this.year;this.datePickerCalendarBody.innerHTML="";return this}; | ||
| DatePicker.prototype.adjustPosition=function(){var a,b;if("function"===typeof this.element.getBoundingClientRect)b=this.element.getBoundingClientRect(),a=b.left+window.pageXOffset,b=b.bottom+window.pageYOffset;else for(a=this.element.offsetLeft,b=this.element.offsetTop+this.element.offsetHeight;this.element=this.element.offsetParent;)a+=this.element.offsetLeft,b+=this.element.offsetTop;this.datePickerCalendar.style.position="absolute";this.datePickerCalendar.style.left=a+"px";this.datePickerCalendar.style.top= | ||
| b+"px"};DatePicker.prototype.destroy=function(){this.datePickerCalendar.remove()}; | ||
| DatePicker.prototype.getFormatedDate=function(a,b){var c={d:a.getDate(),dd:a.getDate(),D:a.getDay(),m:a.getMonth()+1,mm:a.getMonth()+1,M:a.getMonth(),MM:a.getMonth(),yy:a.getFullYear().toString().substr(-2),yyyy:a.getFullYear()};10>c.dd&&(c.dd="0"+c.dd);10>c.mm&&(c.mm="0"+c.mm);c.D=datepicker_langs[this.options.lang].weekdays[c.D?c.D-1:6];c.M=datepicker_langs[this.options.lang].monthsShort[c.M];c.MM=datepicker_langs[this.options.lang].months[c.MM];return b.replace(/(?:[dmM]{1,2}|D|yyyy|yy)/g,function(a){return"undefined"!== | ||
| typeof c[a]?c[a]:a})};DatePicker.prototype.isActive=function(){return this.datePickerCalendar.classList.contains("is-active")};DatePicker.prototype.isDate=function(a){return/Date/.test(Object.prototype.toString.call(a))&&!isNaN(a.getTime())};DatePicker.prototype.isLeapYear=function(a){return 0===a%4&&0!==a%100||0===a%400};DatePicker.prototype.getDaysInMonth=function(a,b){return[31,this.isLeapYear(a)?29:28,31,30,31,30,31,31,30,31,30,31][b]}; | ||
| DatePicker.prototype._compareDates=function(a,b){a.setHours(0,0,0,0);b.setHours(0,0,0,0);return a.getTime()===b.getTime()}; |
| { | ||
| "name": "bulma-calendar", | ||
| "version": "0.1.7", | ||
| "version": "0.1.8", | ||
| "description": "Display a calendar for date selection or for planning management, in different colors and sizes", | ||
@@ -5,0 +5,0 @@ "main": "calendar.sass", |
| { | ||
| "name": "bulma-switch", | ||
| "version": "0.1.2", | ||
| "version": "0.1.3", | ||
| "description": "Display classic checkbox as a switch button, in different colors, sizes, and states ", | ||
@@ -5,0 +5,0 @@ "main": "switch.sass", |
| { | ||
| "name": "bulma-extensions", | ||
| "version": "0.7.1", | ||
| "version": "0.7.2", | ||
| "description": "Set of extensions for Bulma.io CSS Framework", | ||
@@ -5,0 +5,0 @@ "main": "extensions.sass", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.84%
512591
- Lines of code
- increased by0.95%
8309
No dependency changes