From 5afe2df78c880621b0d04092970b7d5cdce07710 Mon Sep 17 00:00:00 2001 From: Tom Hubrecht Date: Wed, 9 Jun 2021 16:55:30 +0200 Subject: [PATCH] Add month selection --- .../static/vendor/datetimepicker/picker.css | 17 ++- shared/static/vendor/datetimepicker/picker.js | 125 ++++++++++++------ 2 files changed, 99 insertions(+), 43 deletions(-) diff --git a/shared/static/vendor/datetimepicker/picker.css b/shared/static/vendor/datetimepicker/picker.css index 1e4a42d..eee5d19 100644 --- a/shared/static/vendor/datetimepicker/picker.css +++ b/shared/static/vendor/datetimepicker/picker.css @@ -1,12 +1,23 @@ .date-tag { height: 2em; width: 2em; + cursor: pointer; +} + +.month-tag { + height: 2em; + width: 6em; + cursor: pointer; +} + +.month-tag:hover { + background-color: #6681b2 !important; + color: white !important; } .date-tag:not(.is-selected):hover { background-color: #6681b2 !important; color: white !important; - cursor: pointer; } .is-selected { @@ -14,10 +25,6 @@ color: white !important; } -.is-selected:hover { - cursor: pointer; -} - .out-range { background-color: white; color: #7a7a7a; diff --git a/shared/static/vendor/datetimepicker/picker.js b/shared/static/vendor/datetimepicker/picker.js index 6b7c9ae..d421181 100644 --- a/shared/static/vendor/datetimepicker/picker.js +++ b/shared/static/vendor/datetimepicker/picker.js @@ -42,39 +42,63 @@ class DateTimePicker { }); if (!['fr', 'en'].includes(config.lang)) { - config.lang = 'fr'; + delete config.lang; + } + if (!['days', 'months'].includes(config.view)) { + delete config.view; } this.config = setDefaults(config || {}, DateTimePicker.defaultConfig); this.date = DateTimePicker.parseDate(this.target.value) || new Date(); - // let _date = this.date || new Date(); this._selected = undefined; + this._view = this.config.view; // Création du modal this.modal = document.createElement('div'); this.modal.classList.add('modal'); - this.modal.innerHTML = (`
`); + this.modal.innerHTML = `
`; let _controls = this.modal.querySelectorAll('header a.button'); this._leftArrow = _controls[0]; this._menu = _controls[1]; this._rightArrow = _controls[2]; this._rightArrow.addEventListener('click', () => { - if (this._beginning.getMonth() == 11) { - this._beginning.setFullYear(this._beginning.getFullYear() + 1, 0, 1); - } else { - this._beginning.setMonth(this._beginning.getMonth() + 1, 1); + switch (this._view) { + case 'days': + if (this._beginning.getMonth() == 11) { + this._beginning.setFullYear(this._beginning.getFullYear() + 1, 0, 1); + } else { + this._beginning.setMonth(this._beginning.getMonth() + 1, 1); + } + break; + case 'months': + this._beginning.setFullYear(this._beginning.getFullYear() + 1); + break; } - this.showCalendarDays(this._beginning); + this.refreshView(); }); this._leftArrow.addEventListener('click', () => { - if (this._beginning.getMonth() == 0) { - this._beginning.setFullYear(this._beginning.getFullYear() - 1, 11, 1); - } else { - this._beginning.setMonth(this._beginning.getMonth() - 1, 1); + switch (this._view) { + case 'days': + if (this._beginning.getMonth() == 0) { + this._beginning.setFullYear(this._beginning.getFullYear() - 1, 11, 1); + } else { + this._beginning.setMonth(this._beginning.getMonth() - 1, 1); + } + case 'months': + this._beginning.setFullYear(this._beginning.getFullYear() - 1); + break; } - this.showCalendarDays(this._beginning); + this.refreshView(); + }); + + this._menu.addEventListener('click', () => { + let _index = DateTimePicker.views.indexOf(this._view); + _index = Math.min(2, _index + 1); + this._view = DateTimePicker.views[_index]; + this.refreshView(); + console.log(this._view, _index); }); let _selects = this.modal.querySelectorAll('footer select'); @@ -95,8 +119,21 @@ class DateTimePicker { this._beginning = new Date(this.date.getFullYear(), this.date.getMonth(), 1); this.initTime(); - this.showCalendarDays(this._beginning); this.updateTarget(); + this.refreshView(); + } + + refreshView() { + switch (this._view) { + case 'days': + this.showCalendarDays(this._beginning); + break; + case 'months': + this.showCalendarMonths(this._beginning); + break; + default: + throw Error('Invalid value for \'this._view\''); + } } showCalendarDays(_beginning) { @@ -105,33 +142,18 @@ class DateTimePicker { this._menu.innerHTML = `${months[_beginning.getMonth()]} ${_beginning.getFullYear()}`; - var _body = this.modal.querySelector('.modal-card section .column'); - _body.innerHTML = (` - - - - - - - - - - - - - -
${days[0]}${days[1]}${days[2]}${days[3]}${days[4]}${days[5]}${days[6]}
- `); + const _body = this.modal.querySelector('.modal-card section .column'); + _body.innerHTML = `
${days[0]}${days[1]}${days[2]}${days[3]}${days[4]}${days[5]}${days[6]}
`; // Création du tableau const _dayLength = 86400000; var day = new Date(_beginning.getTime() - _dayLength * ((_beginning.getDay() + 6) % 7)); - var _tbody = _body.querySelector('tbody'); - for (var i = 0; i < 6; i++) { + const _tbody = _body.querySelector('tbody'); + for (let i = 0; i < 6; i++) { if (i == 0 || day.getMonth() <= _beginning.getMonth()) { let row = document.createElement('tr'); - for (var j = 0; j < 7; j++) { + for (let j = 0; j < 7; j++) { let cell = document.createElement('td'); let _otherMonth = day.getMonth() != _beginning.getMonth(); @@ -154,7 +176,7 @@ class DateTimePicker { if (this.date.getMonth() != this._beginning.getMonth()) { this._beginning.setFullYear(this.date.getFullYear(), this.date.getMonth(), 1); - this.showCalendarDays(this._beginning); + this.refreshView(); } else { if (this._selected != undefined) { this._selected.classList.remove('is-selected'); @@ -164,7 +186,6 @@ class DateTimePicker { } this.updateTarget(); }); - day = new Date(day.getTime() + _dayLength); } _tbody.appendChild(row); @@ -172,7 +193,35 @@ class DateTimePicker { } } - showCalendarMonths() { + showCalendarMonths(_beginning) { + const months = _months[this.config.lang]; + + this._menu.innerHTML = `${_beginning.getFullYear()}`; + var _body = this.modal.querySelector('.modal-card section .column'); + _body.innerHTML = `
`; + + const _tbody = _body.querySelector('tbody'); + for (let i = 0; i < 4; i++) { + let row = document.createElement('tr'); + row.classList.add('py-5'); + + for (let j = 0; j < 3; j++) { + let cell = document.createElement('td'); + row.appendChild(cell); + + let _month = 3 * i + j; + cell.innerHTML = `${months[_month]}`; + + let _tag = cell.firstChild; + _tag.dataset.month = _month; + _tag.addEventListener('click', () => { + this._beginning.setMonth(_tag.dataset.month, 1); + this._view = 'days'; + this.refreshView(); + }); + } + _tbody.appendChild(row); + } } updateTarget() { @@ -188,7 +237,7 @@ class DateTimePicker { this.date.setMinutes(minutes); } - static views = ['days', 'months', 'years']; + static views = ['days', 'months']; static defaultConfig = { view: 'days',