2f:Tdab,function weekPicker({ minYear = 2024, maxYear = 2026, weekStrategy = weekStrategyMondays } = {}) { const out = htl.html`

`; const today = new Date(); const state = { start: null, end: null, year: today.getFullYear(), month: today.getMonth(), week: Math.floor(today.getDate() / 7) }; Object.assign(out, { value: state }); function updateBounds() { const selected = new Date(state.year, state.month, 1); let weeks = weekStrategy(selected); if (state.week >= weeks.length) state.week = weeks.length - 1; let bounds = weeks[state.week]; if (!bounds) { state.week = 0; bounds = weeks[state.week]; if (!bounds) throw new Error( `can't find week ${state.week} in ${JSON.stringify( weeks )}: ${selected.toISOString()}` ); } [state.start, state.end] = bounds; } function setState(partial) { Object.assign(state, partial); updateBounds(); update(); } const monthName = d3.timeFormat("%b"); function update({ update = true } = {}) { function dateInMonth(m = state.month) { return new Date(`2025-${m + 1}-15`); } const newOutput = htl.html`

setState({ month: +ev.target.value })} style="display: flex; gap: 8px; border: none; justify-content: space-evenly" > ${d3.range(12).map((m) => { let id = DOM.uid(); return htl.html .fragment`

${monthName(dateInMonth(m))}

`; })}

setState({ week: +ev.target.value })} style="display: flex; gap: 8px; border: none; justify-content: space-evenly" > ${weekStrategy(dateInMonth()).map(([start, end], idx) => { let id = DOM.uid(); return htl.html .fragment`

Week ${idx + 1}

`; })}

`; morph(out, newOutput); if (update) out.dispatchEvent(new CustomEvent("input")); } updateBounds(); update({ update: false }); return out; }30:[] 2d:{"title":"Week Picker","cells":[{"id":0,"value":"# Week Picker","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"An expanded way to pick a week from a year. Weeks are determined for a month by the `weekStrategy` argument. By default a month's weeks are all the 7 day periods that start on a Monday in that month. Handles months with unequal amounts of weeks, if the week strategy produces that.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"viewof state = weekPicker()","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"state.start.toLocaleDateString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"state.end.toLocaleDateString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"state","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"## With manual tweaks\n\nSometimes you want to start with the above picker, but then have manual control over individual dates.","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"viewof manualStart = Inputs.date({ value: state.start })","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"viewof manualEnd = Inputs.date({ value: state.end })","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof manual = Inputs.form(\n {\n start: Inputs.date({ value: state.start }),\n end: Inputs.date({ value: state.end })\n },\n {\n template: (inputs) =>\n htl.html`

${Object.values(\n inputs\n )}

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"manual","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"function weekStrategyQuarterMonth(date) {\n let start = +d3.timeMonth.floor(date);\n let end = +d3.timeDay.floor(d3.timeMonth.ceil(date));\n let delta = end - start;\n let segments = [\n [start, start + delta * 0.25],\n [start + delta * 0.25, start + delta * 0.5],\n [start + delta * 0.5, start + delta * 0.75],\n [start + delta * 0.75, end]\n ].map(([a, b]) => [\n d3.timeDay.floor(new Date(a)),\n d3.timeDay.offset(d3.timeDay.floor(new Date(b)), -1)\n ]);\n return segments;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"function weekStrategyMondays(date) {\n let start = d3.timeMonth.floor(date);\n let end = d3.timeMonth.offset(start, 1);\n return d3.timeMonday\n .range(start, end)\n .map((a) => [a, d3.timeDay.offset(a, 7)]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"morph = import(\"https://esm.sh/nanomorph@5.4.3\").then((mod) => mod.default)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}