((init) => (document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", init) : init()))(() => { const root = document.getElementById("dp-native"); if (!root) return; // Dates are whole days counted from 1 January 1970, so stepping, comparing and counting are plain // arithmetic, with no time zones or clocks involved. Weeks start on Monday (WEEK_START = 0); set // it to 6 to start them on Sunday. const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; const WEEK_START = 0; const isLeap = (y) => (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0; const monthLength = (y, m) => [31, isLeap(y) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m]; // Year, month (0–11) and day to a day number, and back. const toDay = (y, m, d) => { const yy = m < 2 ? y - 1 : y; const era = Math.floor(yy / 400); const yoe = yy - era * 400; const doy = Math.floor((153 * ((m + 10) % 12) + 2) / 5) + d - 1; return era * 146097 + yoe * 365 + Math.floor(yoe / 4) - Math.floor(yoe / 100) + doy - 719468; }; const fromDay = (n) => { const z = n + 719468; const era = Math.floor(z / 146097); const doe = z - era * 146097; const yoe = Math.floor((doe - Math.floor(doe / 1460) + Math.floor(doe / 36524) - Math.floor(doe / 146096)) / 365); const doy = doe - (365 * yoe + Math.floor(yoe / 4) - Math.floor(yoe / 100)); const mp = Math.floor((5 * doy + 2) / 153); const m = mp < 10 ? mp + 2 : mp - 10; return { y: yoe + era * 400 + (m < 2 ? 1 : 0), m, d: doy - Math.floor((153 * mp + 2) / 5) + 1 }; }; // 0 is Monday … 6 is Sunday (1 January 1970 was a Thursday). const weekday = (n) => (((n + 3) % 7) + 7) % 7; // Where a day sits in the week, counted from the first day of the week. const column = (n) => (weekday(n) - WEEK_START + 7) % 7; const addMonths = (n, k) => { const { y, m, d } = fromDay(n); const total = y * 12 + m + k; const ny = Math.floor(total / 12); const nm = total - ny * 12; return toDay(ny, nm, Math.min(d, monthLength(ny, nm))); }; const monthOf = (n) => { const { y, m } = fromDay(n); return { y, m }; }; const nextMonth = (view, k) => { const total = view.y * 12 + view.m + k; return { y: Math.floor(total / 12), m: total - Math.floor(total / 12) * 12 }; }; const sameMonth = (a, b) => a.y === b.y && a.m === b.m; // The 42 days a month's grid shows (six weeks), each with whether it belongs to the month. const monthCells = (view) => { const first = toDay(view.y, view.m, 1); const start = first - column(first); const length = monthLength(view.y, view.m); return Array.from({ length: 42 }, (_, i) => ({ day: start + i, inMonth: i >= column(first) && i < column(first) + length })); }; const monthName = (view) => `${MONTHS[view.m]} ${view.y}`; // "Tuesday, 27 October 2026": a day button's name. const longDate = (n) => { const { y, m, d } = fromDay(n); return `${WEEKDAYS[weekday(n)]}, ${d} ${MONTHS[m]} ${y}`; }; // "Tue, 27 Oct 2026": what a field shows, in words so 3/11 can't be read two ways. const shortDate = (n) => { const { y, m, d } = fromDay(n); return `${WEEKDAYS[weekday(n)].slice(0, 3)}, ${d} ${MONTHS[m].slice(0, 3)} ${y}`; }; // "27 Oct": inside a sentence or a range. const dayMonth = (n) => { const { m, d } = fromDay(n); return `${d} ${MONTHS[m].slice(0, 3)}`; }; const plural = (count, one, many) => `${count} ${count === 1 ? one : many}`; // Reads what people type: 27/10/2026, 27.10.26, 27-10, 2026-10-27, 27 Oct 2026, October 27, // Tue 27 Oct, today, tomorrow. Numbers are day first (DD/MM/YYYY). Returns a day number, or null. const parseDate = (text, today) => { const s = text.trim().toLowerCase().replace(/,/g, " ").replace(/\b(mon|tue|wed|thu|fri|sat|sun)[a-z]*\.?/g, " ").replace(/\s+/g, " ").trim(); if (s === "today") return today; if (s === "tomorrow") return today + 1; const year = (text) => (text.length === 2 ? 2000 + Number(text) : Number(text)); const valid = (y, m, d) => (m >= 0 && m < 12 && d >= 1 && d <= monthLength(y, m) ? toDay(y, m, d) : null); const iso = s.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/); if (iso) return valid(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3])); const numeric = s.match(/^(\d{1,2})[\s./-](\d{1,2})(?:[\s./-](\d{4}|\d{2}))?$/); if (numeric) return valid(numeric[3] ? year(numeric[3]) : fromDay(today).y, Number(numeric[2]) - 1, Number(numeric[1])); const word = s.match(/[a-z]{3,}/); const numbers = s.match(/\d+/g) || []; if (!word || !numbers.length || numbers.length > 2 || s.replace(/[a-z]+|\d+|[\s./-]/g, "")) return null; const m = MONTHS.findIndex((name) => name.toLowerCase().startsWith(word[0].slice(0, 3)) && name.toLowerCase().startsWith(word[0])); const d = numbers.find((n) => n.length <= 2); const y = numbers.find((n) => n !== d); if (m < 0 || !d) return null; return valid(y ? year(y) : fromDay(today).y, m, Number(d)); }; // The day the arrow keys, Page Up/Down and Home/End move to, or null for other keys. const keyTarget = (day, event) => { const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[event.key]; if (step) return day + step; if (event.key === "Home") return day - column(day); if (event.key === "End") return day + 6 - column(day); if (event.key === "PageUp") return addMonths(day, event.shiftKey ? -12 : -1); if (event.key === "PageDown") return addMonths(day, event.shiftKey ? 12 : 1); return null; }; // The six weeks of a month's grid, seven days each. const weeksOf = (view) => { const cells = monthCells(view); return Array.from({ length: 6 }, (_, w) => cells.slice(w * 7, w * 7 + 7)); }; // The weekday headings in the week's order. const weekdayOrder = () => Array.from({ length: 7 }, (_, i) => WEEKDAYS[(i + WEEK_START) % 7]); // "27 Oct 2026": a date in a narrow field. const dayMonthYear = (n) => `${dayMonth(n)} ${fromDay(n).y}`; // "1 Oct – 27 Oct 2026", or both years when they differ. const rangeText = (a, b) => { if (a === b) return dayMonthYear(a); return fromDay(a).y === fromDay(b).y ? `${dayMonth(a)} – ${dayMonthYear(b)}` : `${dayMonthYear(a)} – ${dayMonthYear(b)}`; }; // A month's place in time, to compare months. const monthIndex = (view) => view.y * 12 + view.m; // "2026-10-27": what a native date input holds. const isoDate = (n) => { const { y, m, d } = fromDay(n); return `${y}-${m < 9 ? "0" : ""}${m + 1}-${d < 10 ? "0" : ""}${d}`; }; // The demo's today is fixed, so the preview always shows the same dates. In your app, use the real // date: const now = new Date(); const TODAY = toDay(now.getFullYear(), now.getMonth(), now.getDate()); const TODAY = toDay(2026, 9, 27); const FIRST = { start: toDay(2026, 10, 2), end: toDay(2026, 10, 6) }; // The year's leave: 25 days, 7 already taken. const ALLOWANCE = 25; const TAKEN = 7; // Weekdays from a to b, both counted. const workingDays = (a, b) => { if (b < a) return 0; const total = b - a + 1; const rest = Array.from({ length: total % 7 }, (_, i) => ((weekday(a) + i) % 7 < 5 ? 1 : 0)); return Math.floor(total / 7) * 5 + rest.reduce((sum, n) => sum + n, 0); }; // The first weekday after b. const backOn = (b) => (weekday(b + 1) < 5 ? b + 1 : b + 8 - weekday(b + 1)); // "Monday, 2 November": a day inside a sentence that names the year once. const dayName = (n) => { const { m, d } = fromDay(n); return `${WEEKDAYS[weekday(n)]}, ${d} ${MONTHS[m]}`; }; // What a native field holds ("2026-11-02", or "" when cleared) as a day number, or null. const fromField = (value) => (value ? parseDate(value, TODAY) : null); // The request in words, or why there is nothing to say yet: { title, dates, balance }. const leaveSummary = (a, b) => { if (a === null || b === null || a < TODAY || b < a) return { title: "Pick your first and last day", dates: "", balance: "" }; const days = workingDays(a, b); return { title: `${plural(days, "working day", "working days")} off`, dates: `${dayName(a)} to ${longDate(b)}. Back on ${dayName(backOn(b))}.`, balance: `${ALLOWANCE - TAKEN - days} of ${ALLOWANCE} days left after this`, }; }; // Why a field's date can't be used, or "". const firstError = (a) => (a !== null && a < TODAY ? "Pick today or a later day." : ""); const lastError = (a, b) => { if (a === null || b === null) return ""; if (b < a) return "The last day can't be before the first day."; const days = workingDays(a, b); return days > ALLOWANCE - TAKEN ? `That's ${plural(days, "working day", "working days")}; you have ${ALLOWANCE - TAKEN} left this year.` : ""; }; const form = document.getElementById("dp-native-form"); const first = document.getElementById("dp-native-first"); const last = document.getElementById("dp-native-last"); const note = document.getElementById("dp-native-note"); const fields = [ { input: first, msg: document.getElementById("dp-native-first-msg"), text: document.getElementById("dp-native-first-text") }, { input: last, msg: document.getElementById("dp-native-last-msg"), text: document.getElementById("dp-native-last-text") }, ]; fields.forEach((f) => (f.hint = f.text.textContent)); // Each field's line holds its hint, or its error in place of it. const say = (f, error) => { f.text.textContent = error || f.hint; f.msg.toggleAttribute("data-error", Boolean(error)); if (error) f.input.setAttribute("aria-invalid", "true"); else f.input.removeAttribute("aria-invalid"); }; // The last day can't be before the first (min follows it); the summary counts working days. const update = () => { const a = fromField(first.value); const b = fromField(last.value); last.min = isoDate(a !== null && a >= TODAY ? a : TODAY); const summary = leaveSummary(a, b); document.getElementById("dp-native-summary").textContent = summary.title; document.getElementById("dp-native-dates").textContent = summary.dates; document.getElementById("dp-native-balance").textContent = summary.balance; note.textContent = ""; }; // A field is checked once it has been changed; after an error, it is checked as it changes. const check = () => { const a = fromField(first.value); const b = fromField(last.value); say(fields[0], first.value ? firstError(a) : "Enter your first day."); say(fields[1], last.value ? lastError(a, b) : "Enter your last day."); }; [first, last].forEach((input) => { input.addEventListener("change", () => { update(); check(); }); input.addEventListener("input", update); }); form.addEventListener("submit", (event) => { event.preventDefault(); check(); const bad = fields.find((f) => f.input.getAttribute("aria-invalid") === "true"); if (bad) { bad.input.focus(); return; } note.textContent = "Request sent to Omar Haddad."; }); // Cancel puts the request back as it was. form.addEventListener("reset", () => { window.setTimeout(() => { fields.forEach((f) => say(f, "")); update(); }); }); });

Native Date Fields

More in this category