53 lines
3.9 KiB
JavaScript
53 lines
3.9 KiB
JavaScript
|
/* Flatpickr is already used by time tracking. Keep API values in their original ISO format. */
|
||
|
|
(() => {
|
||
|
|
'use strict';
|
||
|
|
function reset(scope) {
|
||
|
|
scope.querySelectorAll('input[data-planning-date-type]').forEach(input=>{
|
||
|
|
const type=input.dataset.planningDateType;
|
||
|
|
input._flatpickr?.destroy();input.type=type;delete input.dataset.planningDateType;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function mount(scope) {
|
||
|
|
if(typeof window.flatpickr!=='function')return;
|
||
|
|
scope.querySelectorAll('input[type="date"],input[type="datetime-local"],input[type="time"],input[data-planning-date-type]').forEach(input=>{
|
||
|
|
if(input._flatpickr){input._flatpickr.setDate(input.value,false);input._flatpickr.altInput.disabled=input.disabled;return;}
|
||
|
|
const type=input.type,withTime=type!=='date',timeOnly=type==='time';
|
||
|
|
const label=input.getAttribute('aria-label')||input.labels?.[0]?.textContent.trim()||input.closest('label')?.textContent.trim()||'Vælg dato';
|
||
|
|
input.dataset.planningDateType=type;
|
||
|
|
const instance=window.flatpickr(input,{
|
||
|
|
locale:{...window.flatpickr.l10ns.da,monthAriaLabel:'Måned',yearAriaLabel:'År',hourAriaLabel:'Time',minuteAriaLabel:'Minut'},disableMobile:true,enableTime:withTime,noCalendar:timeOnly,time_24hr:true,
|
||
|
|
minuteIncrement:5,dateFormat:timeOnly?'H:i':withTime?'Y-m-d\\TH:i':'Y-m-d',
|
||
|
|
altInput:true,altFormat:timeOnly?'H:i':withTime?'d.m.Y \\k\\l. H:i':'d.m.Y',
|
||
|
|
allowInput:false,static:!!input.closest('dialog'),monthSelectorType:'dropdown',
|
||
|
|
ariaDateFormat:'j. F Y',defaultHour:8,
|
||
|
|
onReady:(_,__,picker)=>{
|
||
|
|
picker.calendarContainer.classList.add('planning-picker');
|
||
|
|
picker.altInput.setAttribute('aria-label',label);
|
||
|
|
picker.altInput.classList.add('planning-date-input');
|
||
|
|
picker.altInput.required=input.required;picker.altInput.disabled=input.disabled;
|
||
|
|
picker.altInput.placeholder=timeOnly?'Vælg klokkeslæt':withTime?'Vælg dato og tid':'Vælg dato';
|
||
|
|
const footer=document.createElement('div');footer.className='planning-picker-footer';
|
||
|
|
const today=document.createElement('button');today.type='button';today.textContent='I dag';
|
||
|
|
today.onclick=()=>{picker.setDate(new Date(),true);if(!withTime)picker.close();};
|
||
|
|
const close=document.createElement('button');close.type='button';close.textContent='Færdig';close.onclick=()=>picker.close();
|
||
|
|
footer.append(today,close);picker.calendarContainer.append(footer);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const form=input.form;
|
||
|
|
if(form&&!form.dataset.planningDateValidation){
|
||
|
|
form.dataset.planningDateValidation='1';
|
||
|
|
form.addEventListener('submit',event=>{
|
||
|
|
const missing=[...form.querySelectorAll('input[data-planning-date-type]')].find(field=>field.required&&!field.disabled&&!field.value);
|
||
|
|
if(!missing)return;
|
||
|
|
event.preventDefault();event.stopImmediatePropagation();
|
||
|
|
let error=form.querySelector('.work-dialog-error,[role="alert"],.planning-date-error');
|
||
|
|
if(!error){error=document.createElement('p');error.className='planning-date-error text-danger';error.setAttribute('role','alert');form.append(error);}
|
||
|
|
error.textContent='Vælg en dato i de obligatoriske felter.';missing._flatpickr.open();
|
||
|
|
},true);
|
||
|
|
}
|
||
|
|
if(!input.required){const clear=document.createElement('button');clear.type='button';clear.textContent='Ryd';clear.onclick=()=>instance.clear();instance.calendarContainer.querySelector('.planning-picker-footer').prepend(clear);}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
window.BMCPlanningDates={mount,reset};
|
||
|
|
})();
|