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: |
a38bd20d361cd3147fa6f4ac4b5d25c6 |
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 | table.appendChild(body); return table; } buildHeader() { | | > > | | 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 | !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}}}(); |