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',