Add month selection
This commit is contained in:
parent
c36cde316a
commit
5afe2df78c
2 changed files with 99 additions and 43 deletions
17
shared/static/vendor/datetimepicker/picker.css
vendored
17
shared/static/vendor/datetimepicker/picker.css
vendored
|
|
@ -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;
|
||||
|
|
|
|||
125
shared/static/vendor/datetimepicker/picker.js
vendored
125
shared/static/vendor/datetimepicker/picker.js
vendored
|
|
@ -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 = (`<div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><div class="field is-grouped has-addons is-flex-grow-1"><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-left"></i></span></a></div><div class="control is-expanded"><a class="button is-fullwidth"></a></div><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-right"></i></span></a></div></div></header><section class="modal-card-body"><div class="columns is-centered"><div class="column is-narrow"></div></div></section><footer class="modal-card-foot"><div class="field is-horizontal is-flex-grow-1"><div class="field-label is-normal"><label class="label">Horaire :</label></div><div class="field-body"><div class="field has-addons"><div class="control"><div class="select is-left"><select><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>h</b></button></div></div><div class="field has-addons"><div class="control"><div class="select"><select><option>00</option><option>05</option><option>10</option><option>15</option><option>20</option><option>25</option><option>30</option><option>35</option><option>40</option><option>45</option><option>50</option><option>55</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>min</b></button></div></div><div class="field is-expanded"><button class="button is-primary is-fullwidth button-close">Valider</button></div></div></div></footer></div><button class="modal-close is-large" aria-label="close"></button>`);
|
||||
this.modal.innerHTML = `<div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><div class="field is-grouped has-addons is-flex-grow-1"><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-left"></i></span></a></div><div class="control is-expanded"><a class="button is-fullwidth"></a></div><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-right"></i></span></a></div></div></header><section class="modal-card-body"><div class="columns is-centered"><div class="column is-narrow"></div></div></section><footer class="modal-card-foot"><div class="field is-horizontal is-flex-grow-1"><div class="field-label is-normal"><label class="label">Horaire :</label></div><div class="field-body"><div class="field has-addons"><div class="control"><div class="select is-left"><select><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>h</b></button></div></div><div class="field has-addons"><div class="control"><div class="select"><select><option>00</option><option>05</option><option>10</option><option>15</option><option>20</option><option>25</option><option>30</option><option>35</option><option>40</option><option>45</option><option>50</option><option>55</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>min</b></button></div></div><div class="field is-expanded"><button class="button is-primary is-fullwidth button-close">Valider</button></div></div></div></footer></div><button class="modal-close is-large" aria-label="close"></button>`;
|
||||
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 = `<b>${months[_beginning.getMonth()]} ${_beginning.getFullYear()}</b>`;
|
||||
|
||||
var _body = this.modal.querySelector('.modal-card section .column');
|
||||
_body.innerHTML = (`
|
||||
<table class="table has-text-centered is-narrow">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>${days[0]}</th>
|
||||
<th>${days[1]}</th>
|
||||
<th>${days[2]}</th>
|
||||
<th>${days[3]}</th>
|
||||
<th>${days[4]}</th>
|
||||
<th>${days[5]}</th>
|
||||
<th>${days[6]}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
`);
|
||||
const _body = this.modal.querySelector('.modal-card section .column');
|
||||
_body.innerHTML = `<table class="table has-text-centered is-narrow"><thead><tr><th>${days[0]}</th><th>${days[1]}</th><th>${days[2]}</th><th>${days[3]}</th><th>${days[4]}</th><th>${days[5]}</th><th>${days[6]}</th></tr></thead><tbody></tbody></table>`;
|
||||
|
||||
// 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 = `<b>${_beginning.getFullYear()}</b>`;
|
||||
var _body = this.modal.querySelector('.modal-card section .column');
|
||||
_body.innerHTML = `<table class="table"><tbody></tbody></table>`;
|
||||
|
||||
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 = `<span class="tag is-large month-tag">${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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue