--- name: "Library/Mr-xRed/DatePicker" tags: meta/library pageDecoration.prefix: "πŸ› οΈ " share.uri: "github:Mr-xRed/silverbullet-libraries/DatePicker.md" share.hash: c54da2f7 share.mode: pull --- # Date Picker as Slash Command A calendar date picker invoked with `/datepicker`. Inserts the selected date as a `[[WikiLink]]` at the cursor. ![DatePicker|1000](https://raw.githubusercontent.com/Mr-xRed/silverbullet-libraries/refs/heads/main/screenshots/DatePicker.png) ## Features - πŸ“… Full calendar view with month/year dropdowns - πŸ”€ **Configurable date format** β€” click βš™ to open the settings panel - πŸ”„ **Reset button** β€” restore format to default with one click - 🌍 **Localization** β€” customize month and day names in Settings (Monday-first input) - ⌨️ **Keyboard navigation** (arrow keys, Page Up/Down, Enter, Escape) - πŸ’Ύ Format choice, month names, and day names persist across sessions via `localStorage` ## Quick Start 1. Open any page and type `/datepicker`. 1. Click or keyboard-navigate to the desired day and press **Enter** (or click). ----- ## Keyboard Shortcuts |Key |Action | |-----------------------|--------------------------------------------------| |`←` / `β†’` |Move one day back / forward | |`↑` / `↓` |Move one week back / forward | |`Page Up` / `Page Down`|Jump to previous / next month | |`Enter` |Confirm and insert the focused date | |`Escape` |Close picker *(or cancel settings without saving)*| Keyboard navigation is active from the moment the picker opens β€” today's date is pre-focused. The focused day is highlighted with a coloured outline. ----- ## Settings Panel Click the **βš™** gear button (bottom-right of the calendar) to flip the card to the settings view. |Control |Description | |-----------------------|---------------------------------------------------------------------------------------------| |**Date Format** input |Free-text field; use any combination of literal characters and placeholders | |**β†Ί Reset** button |Resets the format field to the _default_ `[[%YYYY%-%MM%-%DD%]]` | |**Placeholder list** |Click any token to insert it at the current cursor position in the format field | |**Live preview** |Shows how today’s date looks with the current format string | |**Month names** input |Comma-separated list of 12 full month names (January β†’ December) | |**Day names** input |Comma-separated list of 7 full day names, **Monday first** (e.g. `Monday, Tuesday, … Sunday`)| |**βœ“ Apply** (`Enter`) |Save all settings to `localStorage` and return to the calendar | |**βœ• Cancel** (`Escape`)|Discard changes and return to the calendar | Arrow keys, Backspace, and all text-editing keys work normally inside the settings input fields. ----- ## Date Format Placeholders All placeholders use the pattern `%TOKEN%`. ### Date |Placeholder|Output |Example | |-----------|----------------------------------------------------|-------------------------| |`%YYYY%` |4-digit year |`2024` | |`%YY%` |2-digit year |`24` | |`%MMMM%` |Full month name (localized) |`January` | |`%MMM%` |Abbreviated month name β€” first 3 chars (localized) |`Jan` | |`%MM%` |Month, zero-padded |`01` | |`%M%` |Month, no padding |`1` | |`%DD%` |Day of month, zero-padded |`05` | |`%D%` |Day of month, no padding |`5` | |`%Ord%` |Ordinal suffix only |`st` Β· `nd` Β· `rd` Β· `th`| |`%dddd%` |Full weekday name (localized) |`Monday` | |`%ddd%` |Abbreviated weekday name β€” first 3 chars (localized)|`Mon` | |`%WW%` |ISO 8601 week number, zero-padded |`03` | |`%W%` |ISO 8601 week number, no padding |`3` | |`%GGGG%` |ISO week-year |`2024` | ### Time |Placeholder|Output |Example| |-----------|--------------------------------|-------| |`%HH%` |Hour, 24-hour clock, zero-padded|`14` | |`%hh%` |Hour, 12-hour clock, zero-padded|`02` | |`%mm%` |Minutes, zero-padded |`07` | |`%ss%` |Seconds, zero-padded |`09` | |`%A%` |AM / PM |`PM` | |`%a%` |am / pm |`pm` | **Ordinal usage:** `%D%%Ord%` β†’ `5th` or `%DD%%Ord%` β†’ `05th` ----- ## Format Examples |Format string |Resulting insert | |---------------------------------|----------------------------| |`[[%YYYY%-%MM%-%DD%]]` |`[[2024-01-05]]` *(default)*| |`[[%YYYY%-%MM%-%DD%|%MMMM% %D%%Ord%, %YYYY%]]` |`[[2024-01-05|January 5th, 2024]]` | |`[[%DD%.%MM%.%YYYY%]]` |`[[05.01.2024]]` | |`[[%D%/%M%/%YYYY%]]` |`[[5/1/2024]]` | |`[[%MMMM% %D%%Ord%, %YYYY%]]` |`[[January 5th, 2024]]` | |`[[%dddd%, %D% %MMM% %YY%]]` |`[[Friday, 5 Jan 24]]` | |`[[%YYYY%-W%WW%]]` |`[[2024-W01]]` | |`[[%YYYY%-%MM%-%DD%T%HH%:%mm%:%ss%]]`|`[[2024-01-05T14:07:09]]` | |`[[%D% %MMMM% %YYYY%]]` |`[[5 January 2024]]` | ----- ## Localization Open Settings and fill in: - **Month names** β€” 12 values, comma-separated, January β†’ December Example: `Januar, Februar, MΓ€rz, April, Mai, Juni, Juli, August, September, Oktober, November, Dezember` - **Day names** β€” 7 values, comma-separated, **Monday first** Example: `Lunes, Martes, MiΓ©rcoles, Jueves, Viernes, SΓ‘bado, Domingo` Short forms (`%MMM%`, `%ddd%`) and calendar header labels are derived automatically as the first 3 characters of each name. Values must contain exactly 12 (months) or 7 (days) entries to be accepted. ----- ## Storage |Key |Value |Notes | |--------------|---------------------------|---------------------------------| |`sb-dp-format`|Format string |Saved with `localStorage.setItem`| |`sb-dp-months`|Comma-separated month names|12 values, January first | |`sb-dp-days` |Comma-separated day names |7 values, Monday first | ## Implementation ```space-lua function insertDate(args) if args and args.date then -- editor.insertAtCursor("[[" .. args.date .. "]]") editor.insertAtCursor(args.date) editor.moveCursor(editor.getCursor()) end end function openDatePicker() local sessionID = "dp_" .. tostring(math.floor(js.window.performance.now())) local existing = js.window.document.getElementById("sb-datepicker-root") if existing then existing.remove() end local function uniqueHandler(e) if e.detail.session == sessionID then insertDate({ date = e.detail.date }) js.window.removeEventListener("sb-insert-date", uniqueHandler) end end js.window.addEventListener("sb-insert-date", uniqueHandler) local container = js.window.document.createElement("div") container.id = "sb-datepicker-root" container.setAttribute("data-session", sessionID) container.innerHTML = [==[
ESC · ←→↑↓ navigate · Enter select · PgUp/Dn month
⚙  Settings
Date Format
Placeholders — click to insert
Localization
Month names (12, comma-separated)
12 names • short form = first 3 chars
Day names, Mon first (7, comma-separated)
7 names, Monday first • short form = first 3 chars
]==] js.window.document.body.appendChild(container) local scriptEl = js.window.document.createElement("script") scriptEl.innerHTML = [==[ (function () { "use strict"; const root = document.getElementById("sb-datepicker-root"); const wrapper = document.getElementById("dp-wrapper"); const SESSION = root.getAttribute("data-session"); const DEFAULT_FMT = "[[%YYYY%-%MM%-%DD%]]"; /* ── Default locale ───────────────────────────────────────────────────── */ const DEFAULT_MONTHS = [ "January","February","March","April","May","June", "July","August","September","October","November","December" ]; /* Monday-first for UI; internally JS uses Sun=0…Sat=6 */ const DEFAULT_DAYS_MON = [ "Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday" ]; /* [Mon,Tue,Wed,Thu,Fri,Sat,Sun] β†’ [Sun,Mon,Tue,Wed,Thu,Fri,Sat] */ function monFirstToJs(a) { return [a[6], a[0], a[1], a[2], a[3], a[4], a[5]]; } /* [Sun,Mon,Tue,Wed,Thu,Fri,Sat] β†’ [Mon,Tue,Wed,Thu,Fri,Sat,Sun] */ function jsToMonFirst(a) { return [a[1], a[2], a[3], a[4], a[5], a[6], a[0]]; } function parseMonths(stored) { if (!stored) return DEFAULT_MONTHS.slice(); const p = stored.split(",").map(s => s.trim()).filter(Boolean); return p.length === 12 ? p : DEFAULT_MONTHS.slice(); } function parseDays(stored) { if (!stored) return monFirstToJs(DEFAULT_DAYS_MON); const p = stored.split(",").map(s => s.trim()).filter(Boolean); return p.length === 7 ? monFirstToJs(p) : monFirstToJs(DEFAULT_DAYS_MON); } /* ── State ────────────────────────────────────────────────────────────── */ let MONTH_FULL = parseMonths(localStorage.getItem("sb-dp-months")); let DAY_FULL = parseDays(localStorage.getItem("sb-dp-days")); let viewDate = new Date(); const today = new Date(); let focusDate = new Date(); let kbMode = true; let isFlipped = false; let currentFmt = localStorage.getItem("sb-dp-format") || DEFAULT_FMT; /* ── Helpers ──────────────────────────────────────────────────────────── */ const pad = n => String(n).padStart(2, "0"); function isoWeek(d) { const dt = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); const day = dt.getUTCDay() || 7; dt.setUTCDate(dt.getUTCDate() + 4 - day); const jan1 = new Date(Date.UTC(dt.getUTCFullYear(), 0, 1)); return Math.ceil(((dt - jan1) / 864e5 + 1) / 7); } function isoWeekYear(d) { const dt = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); const day = dt.getUTCDay() || 7; dt.setUTCDate(dt.getUTCDate() + 4 - day); return dt.getUTCFullYear(); } function ordinalSuffix(d) { if (d >= 11 && d <= 13) return "th"; switch (d % 10) { case 1: return "st"; case 2: return "nd"; case 3: return "rd"; default: return "th"; } } function formatDate(d, fmt) { const Y = d.getFullYear(), Mo = d.getMonth(), D = d.getDate(); const h24 = d.getHours(), min = d.getMinutes(), sec = d.getSeconds(); const h12 = h24 % 12 || 12, dow = d.getDay(); let r = fmt; /* Year – longer first */ r = r.replace(/%YYYY%/g, Y); r = r.replace(/%YY%/g, String(Y).slice(-2)); /* Month – longer first */ r = r.replace(/%MMMM%/g, MONTH_FULL[Mo]); r = r.replace(/%MMM%/g, MONTH_FULL[Mo].slice(0, 3)); r = r.replace(/%MM%/g, pad(Mo + 1)); r = r.replace(/%M%/g, Mo + 1); /* Weekday – longer first */ r = r.replace(/%dddd%/g, DAY_FULL[dow]); r = r.replace(/%ddd%/g, DAY_FULL[dow].slice(0, 3)); /* Day */ r = r.replace(/%DD%/g, pad(D)); r = r.replace(/%Ord%/g, ordinalSuffix(D)); r = r.replace(/%D%/g, D); /* Week */ r = r.replace(/%GGGG%/g, isoWeekYear(d)); r = r.replace(/%WW%/g, pad(isoWeek(d))); r = r.replace(/%W%/g, isoWeek(d)); /* Time */ r = r.replace(/%HH%/g, pad(h24)); r = r.replace(/%hh%/g, pad(h12)); r = r.replace(/%mm%/g, pad(min)); r = r.replace(/%ss%/g, pad(sec)); r = r.replace(/%A%/g, h24 >= 12 ? "PM" : "AM"); r = r.replace(/%a%/g, h24 >= 12 ? "pm" : "am"); return r; } /* ── Lifecycle ────────────────────────────────────────────────────────── */ function cleanup() { window.removeEventListener("keydown", handleKey, true); if (root && root.parentNode) root.remove(); } function selectDay(yr, mo, day) { const formatted = formatDate(new Date(yr, mo, day), currentFmt); window.dispatchEvent(new CustomEvent("sb-insert-date", { detail: { date: formatted, session: SESSION } })); cleanup(); } /* ── Calendar render ──────────────────────────────────────────────────── */ function createCell(dayNum, yr, mo, isOther) { const btn = document.createElement("button"); const date = new Date(yr, mo, dayNum); btn.className = "dp-cell" + (isOther ? " other-month" : ""); btn.setAttribute("tabindex", "-1"); if (date.getDay() === 0) btn.classList.add("sunday"); if (!isOther && dayNum === today.getDate() && mo === today.getMonth() && yr === today.getFullYear()) btn.classList.add("today"); if (kbMode && dayNum === focusDate.getDate() && mo === focusDate.getMonth() && yr === focusDate.getFullYear()) btn.classList.add("focused"); btn.textContent = dayNum; btn.addEventListener("click", e => { e.stopPropagation(); selectDay(yr, mo, dayNum); }); return btn; } function render() { const yr = viewDate.getFullYear(); const mo = viewDate.getMonth(); /* dropdowns */ const mSel = document.getElementById("dp-month-select"); const ySel = document.getElementById("dp-year-select"); mSel.innerHTML = MONTH_FULL.map((n, i) => ``).join(""); const yArr = []; for (let y = yr - 50; y <= yr + 20; y++) yArr.push(y); ySel.innerHTML = yArr.map(y => ``).join(""); /* Weekday labels Mon–Sun using localized names JS day indices in Mon-first display order: 1,2,3,4,5,6,0 */ const dayOrder = [1, 2, 3, 4, 5, 6, 0]; document.getElementById("dp-labels").innerHTML = dayOrder.map((di, i) => `
${DAY_FULL[di].slice(0, 3)}
` ).join(""); /* day grid */ const grid = document.getElementById("dp-days"); grid.innerHTML = ""; const firstDow = new Date(yr, mo, 1).getDay(); const offset = firstDow === 0 ? 6 : firstDow - 1; const lastDay = new Date(yr, mo + 1, 0).getDate(); const prevLast = new Date(yr, mo, 0).getDate(); const prevMo = mo === 0 ? 11 : mo - 1; const prevYr = mo === 0 ? yr - 1 : yr; const nextMo = mo === 11 ? 0 : mo + 1; const nextYr = mo === 11 ? yr + 1 : yr; for (let i = 0; i < offset; i++) grid.appendChild(createCell(prevLast - offset + 1 + i, prevYr, prevMo, true)); for (let d = 1; d <= lastDay; d++) grid.appendChild(createCell(d, yr, mo, false)); const trailing = (offset + lastDay) % 7; const fill = trailing === 0 ? 0 : 7 - trailing; for (let i = 1; i <= fill; i++) grid.appendChild(createCell(i, nextYr, nextMo, true)); if (kbMode) { const fc = grid.querySelector(".focused"); if (fc) fc.focus(); } } /* ── Settings flip ────────────────────────────────────────────────────── */ function updatePreview() { const v = document.getElementById("dp-fmt-inp").value; document.getElementById("dp-preview").textContent = "\u25b6 " + formatDate(today, v || DEFAULT_FMT); } function flipToSettings() { isFlipped = true; wrapper.classList.add("flipped"); document.getElementById("dp-gear").classList.add("spinning"); document.getElementById("dp-sett-err").textContent = ""; const inp = document.getElementById("dp-fmt-inp"); inp.value = currentFmt; document.getElementById("dp-months-inp").value = MONTH_FULL.join(", "); document.getElementById("dp-days-inp").value = jsToMonFirst(DAY_FULL).join(", "); updatePreview(); setTimeout(() => { inp.focus(); inp.select(); }, 330); } function flipToCalendar() { isFlipped = false; wrapper.classList.remove("flipped"); document.getElementById("dp-gear").classList.remove("spinning"); } /* ── Placeholder reference ────────────────────────────────────────────── */ /* Descriptions: max 4 visible chars so the 4-col grid stays compact */ const PLACEHOLDERS = [ ["%YYYY%", "Year: 20026"], ["%YY%", "Year short: 26" ], ["%MMMM%", "Full.m.: March"], ["%MMM%", "Short m.: Mar" ], ["%MM%", "Month: 03" ], ["%M%", "Month: 3" ], ["%DD%", "Day(0): 05" ], ["%D%", "Day: 5" ], ["%Ord%", "Ordinal: st,nd,th" ], ["%dddd%", "F.Wkday:Monday"], ["%ddd%", "Sh.Wkday: Mon" ], ["%WW%", "WeekNum(0): 09" ], ["%W%", "WeekNum: 9" ], ["%GGGG%", "Weekyear"], ["%HH%", "24-Hour: 16" ], ["%hh%", "12-Hour: 04" ], ["%mm%", "Minutes: 45" ], ["%ss%", "Seconds" ], ["%A%", "AM/PM"], ["%a%", "am/pm"], ]; const phGrid = document.getElementById("dp-ph-grid"); PLACEHOLDERS.forEach(([key, desc]) => { const k = document.createElement("span"); k.className = "dp-ph-key"; k.textContent = key; k.title = "Insert " + key; k.addEventListener("click", () => { const inp = document.getElementById("dp-fmt-inp"); const s = inp.selectionStart, e2 = inp.selectionEnd; inp.value = inp.value.slice(0, s) + key + inp.value.slice(e2); inp.selectionStart = inp.selectionEnd = s + key.length; inp.focus(); updatePreview(); }); const dv = document.createElement("span"); dv.className = "dp-ph-desc"; dv.textContent = desc; phGrid.appendChild(k); phGrid.appendChild(dv); }); /* ── Wire up UI events ────────────────────────────────────────────────── */ document.getElementById("dp-month-select").addEventListener("change", e => { viewDate = new Date(viewDate.getFullYear(), parseInt(e.target.value), 1); render(); }); document.getElementById("dp-year-select").addEventListener("change", e => { viewDate = new Date(parseInt(e.target.value), viewDate.getMonth(), 1); render(); }); document.getElementById("dp-prev").addEventListener("click", e => { e.stopPropagation(); viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1); render(); }); document.getElementById("dp-next").addEventListener("click", e => { e.stopPropagation(); viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1); render(); }); document.getElementById("dp-today").addEventListener("click", e => { e.stopPropagation(); viewDate = new Date(today.getFullYear(), today.getMonth(), 1); focusDate = new Date(); kbMode = true; render(); }); document.getElementById("dp-gear").addEventListener("click", e => { e.stopPropagation(); flipToSettings(); }); /* Reset format to default */ document.getElementById("dp-reset-fmt").addEventListener("click", e => { e.stopPropagation(); document.getElementById("dp-fmt-inp").value = DEFAULT_FMT; updatePreview(); document.getElementById("dp-fmt-inp").focus(); }); /* Apply settings */ document.getElementById("dp-apply").addEventListener("click", e => { e.stopPropagation(); const errEl = document.getElementById("dp-sett-err"); errEl.textContent = ""; /* Format */ const fmtVal = document.getElementById("dp-fmt-inp").value.trim(); currentFmt = fmtVal || DEFAULT_FMT; localStorage.setItem("sb-dp-format", currentFmt); /* Month names */ const monthsRaw = document.getElementById("dp-months-inp").value.trim(); if (monthsRaw) { const p = monthsRaw.split(",").map(s => s.trim()).filter(Boolean); if (p.length === 12) { MONTH_FULL = p; localStorage.setItem("sb-dp-months", monthsRaw); } else { errEl.textContent = "Month names need exactly 12 entries."; return; } } /* Day names (Mon-first input β†’ JS Sun-first internal array) */ const daysRaw = document.getElementById("dp-days-inp").value.trim(); if (daysRaw) { const p = daysRaw.split(",").map(s => s.trim()).filter(Boolean); if (p.length === 7) { DAY_FULL = monFirstToJs(p); localStorage.setItem("sb-dp-days", daysRaw); } else { errEl.textContent = "Day names need exactly 7 entries (Mon first)."; return; } } flipToCalendar(); render(); }); document.getElementById("dp-cancel-sett").addEventListener("click", e => { e.stopPropagation(); flipToCalendar(); }); document.getElementById("dp-fmt-inp").addEventListener("input", updatePreview); /* click-outside closes */ root.addEventListener("click", cleanup); wrapper.addEventListener("click", e => e.stopPropagation()); /* ── Keyboard navigation ──────────────────────────────────────────────── */ const NAV_KEYS = new Set([ "ArrowLeft","ArrowRight","ArrowUp","ArrowDown", "Enter","Escape","PageUp","PageDown", "Backspace", "Delete" ]); function handleKey(e) { // If we are currently in a text field, let the input handle itself // but stop the event from reaching the SilverBullet editor. if (e.target.tagName === "INPUT" || e.target.tagName === "SELECT") { if (e.key === "Enter") { e.preventDefault(); e.stopImmediatePropagation(); document.getElementById("dp-apply").click(); } else if (e.key === "Escape") { e.preventDefault(); e.stopImmediatePropagation(); flipToCalendar(); } // Allow Arrows and Backspace to work in the input, // but stop SilverBullet from seeing them. e.stopImmediatePropagation(); return; } if (!NAV_KEYS.has(e.key)) return; /* Settings mode: handled above, but as a safety for general navigation keys */ if (isFlipped) { if (e.key === "Escape") { e.stopImmediatePropagation(); e.preventDefault(); flipToCalendar(); } return; } /* Calendar mode: capture everything */ e.stopImmediatePropagation(); e.preventDefault(); if (e.key === "Escape") { cleanup(); return; } if (e.key === "Enter") { if (kbMode) selectDay(focusDate.getFullYear(), focusDate.getMonth(), focusDate.getDate()); return; } kbMode = true; if (e.key === "ArrowLeft") focusDate.setDate(focusDate.getDate() - 1); else if (e.key === "ArrowRight") focusDate.setDate(focusDate.getDate() + 1); else if (e.key === "ArrowUp") focusDate.setDate(focusDate.getDate() - 7); else if (e.key === "ArrowDown") focusDate.setDate(focusDate.getDate() + 7); else if (e.key === "PageUp") focusDate.setMonth(focusDate.getMonth() - 1); else if (e.key === "PageDown") focusDate.setMonth(focusDate.getMonth() + 1); if (focusDate.getMonth() !== viewDate.getMonth() || focusDate.getFullYear() !== viewDate.getFullYear()) { viewDate = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1); } render(); } window.addEventListener("keydown", handleKey, true); /* ── Initial render ───────────────────────────────────────────────────── */ render(); wrapper.setAttribute("tabindex", "-1"); wrapper.focus(); })(); ]==] container.appendChild(scriptEl) end slashCommand.define { name = "datepicker", run = function() openDatePicker() end } ``` - [SilverBullet Community](https://community.silverbullet.md/t/datepicker-add-on-as-slashcommand/3679?u=mr.red)