KD2 Framework  Check-in [a38bd20d36]

Overview
Comment:Add "return to today" button to date picker
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | 7.3
Files: files | file ages | folders
SHA1: a38bd20d361cd3147fa6f4ac4b5d25c661a8f4fc
User & Date: bohwaz on 2022-03-21 10:29:44
Other Links: branch diff | manifest | tags
Context
2022-03-28
12:31
Image: fix typo in variable name check-in: f6cf8154c1 user: bohwaz tags: 7.3
2022-03-21
10:29
Add "return to today" button to date picker check-in: a38bd20d36 user: bohwaz tags: 7.3
2022-03-18
00:25
Fix PHP 8.1 warnings check-in: 47abd2387c user: bohwaz tags: 7.3
Changes

Modified src/js/datepicker/datepicker2.js from [5de09ece36] to [27f2764897].

8
9
10
11
12
13
14

15
16
17
18
19
20
21
		weekdays: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
		months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		labels: {
			"Previous month": "Mois précédent",
			"Next month": "Mois suivant",
			"Change year": "Choisir l'année",
			"Change month": "Choisir le mois",

		}
	};

	window.DatePicker = class {
		constructor(button, input, config) {
			this.button = button;
			this.input = input;







>







8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
		weekdays: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
		months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		labels: {
			"Previous month": "Mois précédent",
			"Next month": "Mois suivant",
			"Change year": "Choisir l'année",
			"Change month": "Choisir le mois",
			"Today": "Aujourd'hui"
		}
	};

	window.DatePicker = class {
		constructor(button, input, config) {
			this.button = button;
			this.input = input;
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

193
194
195
196

197
198
199
200
201
202
203
204
			table.appendChild(body);

			return table;
		}

		buildHeader()
		{
			let labels = ["Previous month", "Next month", "Change month", "Change year"];
			labels = labels.map((l) => DATEPICKER_L10N[this.lang].labels[l] || l);

			let j = 0;
			let options = DATEPICKER_L10N[this.lang].months.map((m) => `<option value="${j++}">${m}</option>`);
			let year = this.date.getFullYear();

			this.header = document.createElement('nav');
			this.header.innerHTML = `<input type="button" value="←" title="${labels[0]}" />
				<span><select title="${labels[2]}">${options}</select> <input type="number" size="4" step="1" min="1" max="2500" title="${labels[3]}" value="${year}"></span>

				<input type="button" value="→" title="${labels[1]}" />`;

			this.nav = this.header.querySelectorAll('input, select');
			this.nav[0].onclick = () => { this.month(-1, true); return false; };

			this.nav[3].onclick = () => { this.month(1, true); return false; };
			this.nav[1].value = this.date.getMonth();
			this.nav[1].onchange = () => this.month(this.nav[1].value, false);
			this.nav[2].onchange = () => this.year(this.nav[2].value);
			this.nav[2].onclick = (e) => e.target.select();
			this.nav[2].onkeyup = () => { let y = this.nav[2].value; y.length == 4 ? this.year(y) : null; };

			this.container.appendChild(this.header);







|









>




>
|







177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
			table.appendChild(body);

			return table;
		}

		buildHeader()
		{
			let labels = ["Previous month", "Next month", "Change month", "Change year", "Today"];
			labels = labels.map((l) => DATEPICKER_L10N[this.lang].labels[l] || l);

			let j = 0;
			let options = DATEPICKER_L10N[this.lang].months.map((m) => `<option value="${j++}">${m}</option>`);
			let year = this.date.getFullYear();

			this.header = document.createElement('nav');
			this.header.innerHTML = `<input type="button" value="←" title="${labels[0]}" />
				<span><select title="${labels[2]}">${options}</select> <input type="number" size="4" step="1" min="1" max="2500" title="${labels[3]}" value="${year}"></span>
				<input type="button" value="↺" title="${labels[4]}" />
				<input type="button" value="→" title="${labels[1]}" />`;

			this.nav = this.header.querySelectorAll('input, select');
			this.nav[0].onclick = () => { this.month(-1, true); return false; };
			this.nav[3].onclick = () => { this.today(); return false; };
			this.nav[4].onclick = () => { this.month(1, true); return false; };
			this.nav[1].value = this.date.getMonth();
			this.nav[1].onchange = () => this.month(this.nav[1].value, false);
			this.nav[2].onchange = () => this.year(this.nav[2].value);
			this.nav[2].onclick = (e) => e.target.select();
			this.nav[2].onkeyup = () => { let y = this.nav[2].value; y.length == 4 ? this.year(y) : null; };

			this.container.appendChild(this.header);
218
219
220
221
222
223
224







225
226
227
228
229
230
231
			if (this.date.getFullYear() == y) {
				return;
			}

			this.date.setYear(y);
			this.refresh();
		}








		month(change, relative)
		{
			let d = this.date.getDate();
			let m = relative ? this.date.getMonth() + change : change;
			this.date.setMonth(m);








>
>
>
>
>
>
>







221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
			if (this.date.getFullYear() == y) {
				return;
			}

			this.date.setYear(y);
			this.refresh();
		}

		today()
		{
			this.date = new CalendarDate;
			this.refresh();
			this.focus();
		}

		month(change, relative)
		{
			let d = this.date.getDate();
			let m = relative ? this.date.getMonth() + change : change;
			this.date.setMonth(m);

Modified src/js/datepicker/datepicker2.min.js from [51860088c8] to [02681a4dcb].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(function(){DATEPICKER_L10N={};DATEPICKER_L10N.en={weekdays:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],months:['January','February','March','April','May','June','July','August','September','October','November','December']};DATEPICKER_L10N.fr={weekdays:['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'],months:['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],labels:{"Previous month":"Mois précédent","Next month":"Mois suivant","Change year":"Choisir l'année","Change month":"Choisir le mois",}};window.DatePicker=class{constructor(button,input,config){this.button=button;this.input=input;this.date=null;this.nav=[];this.header=null;Object.assign(this,{format:0,lang:'fr',class:'datepicker'},config);var c=document.createElement('dialog');c.className=this.class;this.container=button.parentNode.insertBefore(c,button.nextSibling);button.addEventListener('click',()=>this.container.hasAttribute('open')?this.close():this.open(),false);}
open()
{var d='';if(this.input){d=this.input.value;}
else if(this.button.dataset&&this.button.dataset.date){d=this.button.dataset.date;}
if(d==''){d=new CalendarDate;}
else if(this.format==1){d=d.split('/');d=new CalendarDate(d[2],d[1]-1,d[0]);}
else{d=new CalendarDate(d);}
if(isNaN(d.getTime())){d=new CalendarDate;}
this.date=d;this.buildHeader();this.refresh();this.focus();this.container.setAttribute('open','open');this.keyEvent=(e)=>{if(e.ctrlKey||e.altKey||e.shiftKey||e.metaKey){return true;}
if(e.key=='Escape'){return!!this.close();}
if(this.header.contains(e.target)){return true;}
var r=this.key(e.key);if(!r){e.preventDefault();}
return r;};this.clickEvent=(e)=>{if(this.container.contains(e.target)){return true;}
if(this.button.contains(e.target)){return true;}
this.close();};document.addEventListener('keydown',this.keyEvent,true);document.addEventListener('click',this.clickEvent,true);}
key(key)
{switch(key){case 'Enter':return!!this.select();case 'ArrowLeft':return!!this.day(-1);case 'ArrowRight':return!!this.day(1);case 'ArrowUp':return!!this.day(-7);case 'ArrowDown':return!!this.day(7);case 'PageDown':return!!this.month(1,true);case 'PageUp':return!!this.month(-1,true);}
return true;}
close()
{this.container.innerHTML='';this.container.removeAttribute('open');this.input?this.input.select():null;document.removeEventListener('keydown',this.keyEvent,true);document.removeEventListener('click',this.clickEvent,true);}
generateTable()
{var c=(e)=>{return document.createElement(e);}
var table=c('table'),head=c('thead'),headRow=c('tr'),body=c('tbody');DATEPICKER_L10N[this.lang].weekdays.forEach((d)=>{var cell=c('td');cell.innerHTML=d;headRow.appendChild(cell);});head.appendChild(headRow);table.appendChild(head);var weeks=this.date.getCalendarArray();weeks.forEach((week)=>{var row=c('tr');week.forEach((day)=>{var cell=c('td');if(day){cell.innerHTML=`<input type="button" value="${day.getDate()}" />`;cell.firstChild.onclick=(e)=>this.select(e.target.value);cell.firstChild.onfocus=(e)=>this.date.setDate(e.target.value)&&this.focus(false);}
row.appendChild(cell);});body.appendChild(row);});table.appendChild(body);return table;}
buildHeader()
{let labels=["Previous month","Next month","Change month","Change year"];labels=labels.map((l)=>DATEPICKER_L10N[this.lang].labels[l]||l);let j=0;let options=DATEPICKER_L10N[this.lang].months.map((m)=>`<option value="${j++}">${m}</option>`);let year=this.date.getFullYear();this.header=document.createElement('nav');this.header.innerHTML=`<input type="button" value="←" title="${labels[0]}" />
				<span><select title="${labels[2]}">${options}</select> <input type="number" size="4" step="1" min="1" max="2500" title="${labels[3]}" value="${year}"></span>
				<input type="button" value="→" title="${labels[1]}" />`;this.nav=this.header.querySelectorAll('input, select');this.nav[0].onclick=()=>{this.month(-1,true);return false;};this.nav[3].onclick=()=>{this.month(1,true);return false;};this.nav[1].value=this.date.getMonth();this.nav[1].onchange=()=>this.month(this.nav[1].value,false);this.nav[2].onchange=()=>this.year(this.nav[2].value);this.nav[2].onclick=(e)=>e.target.select();this.nav[2].onkeyup=()=>{let y=this.nav[2].value;y.length==4?this.year(y):null;};this.container.appendChild(this.header);}
refresh()
{this.nav[1].value=this.date.getMonth();this.nav[2].value=this.date.getFullYear();let c=this.container.childNodes;c.length==2?c[1].remove():null;this.container.appendChild(this.generateTable());}
year(y)
{if(this.date.getFullYear()==y){return;}
this.date.setYear(y);this.refresh();}
month(change,relative)
{let d=this.date.getDate();let m=relative?this.date.getMonth()+change:change;this.date.setMonth(m);if(this.date.getDate()!=d){this.date.setDate(0);}
this.refresh();this.focus(false);}
day(change)
{var old=new CalendarDate(this.date);this.date.setDate(this.date.getDate()+change);if(this.date.getMonth()!=old.getMonth()){this.refresh();}
this.focus();}
select(s)
{if(s){this.date.setDate(parseInt(s,10));}
var y=this.date.getFullYear(),m=('0'+(this.date.getMonth()+1)).substr(-2),d=('0'+this.date.getDate()).substr(-2);let v=this.format==1?d+'/'+m+'/'+y:y+'-'+m+'-'+d;if(this.input){this.input.value=v;}
if(this.button.dataset&&this.button.dataset.date){this.button.dataset.date=v;}
this.close();var event=document.createEvent('HTMLEvents');event.initEvent('change',true,true);event.eventName='change';(this.input||this.button).dispatchEvent(event);}
focus(nofocus)
{this.container.querySelectorAll('tbody td').forEach((cell)=>{if(!cell.firstChild){return;}
var v=parseInt(cell.firstChild.value,10);if(v===this.date.getDate()){if(nofocus!==false){cell.firstChild.focus();}
cell.className='focus';}
else{cell.className='';}});}}
class CalendarDate extends Date{getCalendarArray(){var date=new CalendarDate(this.getFullYear(),this.getMonth(),1);var days=[];var day=date.getDayOfWeek();for(var i=0;i<day-1;i++){days.push(null);}
while(date.getMonth()===this.getMonth()){days.push(new CalendarDate(date));date.setDate(date.getDate()+1);}
day=date.getDayOfWeek();for(var i=0;i<=7-day;i++){days.push(null);}
var weeks=[];while(days.length){weeks.push(days.splice(0,7));}
return weeks;}
getDayOfWeek(){var day=this.getDay();if(day==0)return 7;return day;}}}());
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
1






















































!function(){DATEPICKER_L10N={},DATEPICKER_L10N.en={weekdays:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],months:["January","February","March","April","May","June","July","August","September","October","November","December"]},DATEPICKER_L10N.fr={weekdays:["Lun","Mar","Mer","Jeu","Ven","Sam","Dim"],months:["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],labels:{"Previous month":"Mois précédent","Next month":"Mois suivant","Change year":"Choisir l'année","Change month":"Choisir le mois",Today:"Aujourd'hui"}},window.DatePicker=class{constructor(t,e,a){this.button=t,this.input=e,this.date=null,this.nav=[],this.header=null,Object.assign(this,{format:0,lang:"fr",class:"datepicker"},a);var i=document.createElement("dialog");i.className=this.class,this.container=t.parentNode.insertBefore(i,t.nextSibling),t.addEventListener("click",(()=>this.container.hasAttribute("open")?this.close():this.open()),!1)}open(){var e="";this.input?e=this.input.value:this.button.dataset&&this.button.dataset.date&&(e=this.button.dataset.date),""==e?e=new t:1==this.format?(e=e.split("/"),e=new t(e[2],e[1]-1,e[0])):e=new t(e),isNaN(e.getTime())&&(e=new t),this.date=e,this.buildHeader(),this.refresh(),this.focus(),this.container.setAttribute("open","open"),this.keyEvent=t=>{if(t.ctrlKey||t.altKey||t.shiftKey||t.metaKey)return!0;if("Escape"==t.key)return!!this.close();if(this.header.contains(t.target))return!0;var e=this.key(t.key);return e||t.preventDefault(),e},this.clickEvent=t=>!!this.container.contains(t.target)||(!!this.button.contains(t.target)||void this.close()),document.addEventListener("keydown",this.keyEvent,!0),document.addEventListener("click",this.clickEvent,!0)}key(t){switch(t){case"Enter":return!!this.select();case"ArrowLeft":return!!this.day(-1);case"ArrowRight":return!!this.day(1);case"ArrowUp":return!!this.day(-7);case"ArrowDown":return!!this.day(7);case"PageDown":return!!this.month(1,!0);case"PageUp":return!!this.month(-1,!0)}return!0}close(){this.container.innerHTML="",this.container.removeAttribute("open"),this.input&&this.input.select(),document.removeEventListener("keydown",this.keyEvent,!0),document.removeEventListener("click",this.clickEvent,!0)}generateTable(){var t=t=>document.createElement(t),e=t("table"),a=t("thead"),i=t("tr"),s=t("tbody");return DATEPICKER_L10N[this.lang].weekdays.forEach((e=>{var a=t("td");a.innerHTML=e,i.appendChild(a)})),a.appendChild(i),e.appendChild(a),this.date.getCalendarArray().forEach((e=>{var a=t("tr");e.forEach((e=>{var i=t("td");e&&(i.innerHTML=`<input type="button" value="${e.getDate()}" />`,i.firstChild.onclick=t=>this.select(t.target.value),i.firstChild.onfocus=t=>this.date.setDate(t.target.value)&&this.focus(!1)),a.appendChild(i)})),s.appendChild(a)})),e.appendChild(s),e}buildHeader(){let t=["Previous month","Next month","Change month","Change year","Today"];t=t.map((t=>DATEPICKER_L10N[this.lang].labels[t]||t));let e=0,a=DATEPICKER_L10N[this.lang].months.map((t=>`<option value="${e++}">${t}</option>`)),i=this.date.getFullYear();this.header=document.createElement("nav"),this.header.innerHTML=`<input type="button" value="←" title="${t[0]}" />\n\t\t\t\t<span><select title="${t[2]}">${a}</select> <input type="number" size="4" step="1" min="1" max="2500" title="${t[3]}" value="${i}"></span>\n\t\t\t\t<input type="button" value="↺" title="${t[4]}" />\n\t\t\t\t<input type="button" value="→" title="${t[1]}" />`,this.nav=this.header.querySelectorAll("input, select"),this.nav[0].onclick=()=>(this.month(-1,!0),!1),this.nav[3].onclick=()=>(this.today(),!1),this.nav[4].onclick=()=>(this.month(1,!0),!1),this.nav[1].value=this.date.getMonth(),this.nav[1].onchange=()=>this.month(this.nav[1].value,!1),this.nav[2].onchange=()=>this.year(this.nav[2].value),this.nav[2].onclick=t=>t.target.select(),this.nav[2].onkeyup=()=>{let t=this.nav[2].value;4==t.length&&this.year(t)},this.container.appendChild(this.header)}refresh(){this.nav[1].value=this.date.getMonth(),this.nav[2].value=this.date.getFullYear();let t=this.container.childNodes;2==t.length&&t[1].remove(),this.container.appendChild(this.generateTable())}year(t){this.date.getFullYear()!=t&&(this.date.setYear(t),this.refresh())}today(){this.date=new t,this.refresh(),this.focus()}month(t,e){let a=this.date.getDate(),i=e?this.date.getMonth()+t:t;this.date.setMonth(i),this.date.getDate()!=a&&this.date.setDate(0),this.refresh(),this.focus(!1)}day(e){var a=new t(this.date);this.date.setDate(this.date.getDate()+e),this.date.getMonth()!=a.getMonth()&&this.refresh(),this.focus()}select(t){t&&this.date.setDate(parseInt(t,10));var e=this.date.getFullYear(),a=("0"+(this.date.getMonth()+1)).substr(-2),i=("0"+this.date.getDate()).substr(-2);let s=1==this.format?i+"/"+a+"/"+e:e+"-"+a+"-"+i;this.input&&(this.input.value=s),this.button.dataset&&this.button.dataset.date&&(this.button.dataset.date=s),this.close();var n=document.createEvent("HTMLEvents");n.initEvent("change",!0,!0),n.eventName="change",(this.input||this.button).dispatchEvent(n)}focus(t){this.container.querySelectorAll("tbody td").forEach((e=>{e.firstChild&&(parseInt(e.firstChild.value,10)===this.date.getDate()?(!1!==t&&e.firstChild.focus(),e.className="focus"):e.className="")}))}};class t extends Date{getCalendarArray(){for(var e=new t(this.getFullYear(),this.getMonth(),1),a=[],i=e.getDayOfWeek(),s=0;s<i-1;s++)a.push(null);for(;e.getMonth()===this.getMonth();)a.push(new t(e)),e.setDate(e.getDate()+1);i=e.getDayOfWeek();for(s=0;s<=7-i;s++)a.push(null);for(var n=[];a.length;)n.push(a.splice(0,7));return n}getDayOfWeek(){var t=this.getDay();return 0==t?7:t}}}();