+103

src/css/app.css

reviewed

··· 5191 5191 } 5192 5192 5193 5193 /* ======================================================== 5194 5194 + Date Picker (#123) 5195 5195 + ======================================================== */ 5196 5196 + 5197 5197 + .date-picker { 5198 5198 + background: var(--color-surface); 5199 5199 + border: 1px solid var(--color-border-strong); 5200 5200 + border-radius: var(--radius-md); 5201 5201 + box-shadow: var(--shadow-lg); 5202 5202 + padding: 8px; 5203 5203 + width: 224px; 5204 5204 + font-family: var(--font-body); 5205 5205 + font-size: 0.75rem; 5206 5206 + } 5207 5207 + 5208 5208 + .dp-header { 5209 5209 + display: flex; 5210 5210 + align-items: center; 5211 5211 + justify-content: space-between; 5212 5212 + margin-bottom: 6px; 5213 5213 + } 5214 5214 + 5215 5215 + .dp-title { 5216 5216 + font-weight: 600; 5217 5217 + font-size: 0.8rem; 5218 5218 + } 5219 5219 + 5220 5220 + .dp-nav { 5221 5221 + background: none; 5222 5222 + border: none; 5223 5223 + cursor: pointer; 5224 5224 + padding: 2px 6px; 5225 5225 + border-radius: var(--radius-sm); 5226 5226 + color: var(--color-text); 5227 5227 + font-size: 0.65rem; 5228 5228 + } 5229 5229 + 5230 5230 + .dp-nav:hover { 5231 5231 + background: var(--color-surface-alt); 5232 5232 + } 5233 5233 + 5234 5234 + .dp-grid { 5235 5235 + display: grid; 5236 5236 + grid-template-columns: repeat(7, 1fr); 5237 5237 + gap: 1px; 5238 5238 + text-align: center; 5239 5239 + } 5240 5240 + 5241 5241 + .dp-day-header { 5242 5242 + font-weight: 600; 5243 5243 + color: var(--color-text-faint); 5244 5244 + padding: 4px 0; 5245 5245 + font-size: 0.65rem; 5246 5246 + } 5247 5247 + 5248 5248 + .dp-empty { 5249 5249 + padding: 4px; 5250 5250 + } 5251 5251 + 5252 5252 + .dp-day { 5253 5253 + background: none; 5254 5254 + border: none; 5255 5255 + padding: 4px; 5256 5256 + cursor: pointer; 5257 5257 + border-radius: var(--radius-sm); 5258 5258 + color: var(--color-text); 5259 5259 + font-size: 0.75rem; 5260 5260 + line-height: 1.6; 5261 5261 + } 5262 5262 + 5263 5263 + .dp-day:hover { 5264 5264 + background: var(--color-surface-alt); 5265 5265 + } 5266 5266 + 5267 5267 + .dp-today { 5268 5268 + font-weight: 700; 5269 5269 + outline: 1px solid var(--color-accent); 5270 5270 + outline-offset: -1px; 5271 5271 + } 5272 5272 + 5273 5273 + .dp-selected { 5274 5274 + background: var(--color-accent) !important; 5275 5275 + color: white; 5276 5276 + } 5277 5277 + 5278 5278 + .dp-footer { 5279 5279 + margin-top: 6px; 5280 5280 + text-align: center; 5281 5281 + } 5282 5282 + 5283 5283 + .dp-today-btn { 5284 5284 + background: none; 5285 5285 + border: none; 5286 5286 + cursor: pointer; 5287 5287 + color: var(--color-accent); 5288 5288 + font-size: 0.7rem; 5289 5289 + font-weight: 600; 5290 5290 + } 5291 5291 + 5292 5292 + .dp-today-btn:hover { 5293 5293 + text-decoration: underline; 5294 5294 + } 5295 5295 + 5296 5296 + /* ======================================================== 5194 5297 Onboarding Tooltip 5195 5298 ======================================================== */ 5196 5299

+176

src/sheets/date-picker.ts

reviewed

··· 1 1 + /** 2 2 + * Inline Date Picker Widget for Sheets (#123) 3 3 + * 4 4 + * Shows a calendar popup when editing a date-formatted cell. 5 5 + * Designed for mouse-click selection; keyboard nav handled by 6 6 + * the main grid shortcuts. 7 7 + */ 8 8 + 9 9 + export interface DatePickerOptions { 10 10 + onSelect: (dateStr: string) => void; 11 11 + onClose: () => void; 12 12 + } 13 13 + 14 14 + const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; 15 15 + const MONTHS = [ 16 16 + 'January', 'February', 'March', 'April', 'May', 'June', 17 17 + 'July', 'August', 'September', 'October', 'November', 'December', 18 18 + ]; 19 19 + 20 20 + /** 21 21 + * Try to parse a cell value as a date (YYYY-MM-DD or similar). 22 22 + * Returns a Date if valid, null otherwise. 23 23 + */ 24 24 + export function parseDateValue(value: string): Date | null { 25 25 + if (!value || typeof value !== 'string') return null; 26 26 + // ISO format YYYY-MM-DD 27 27 + const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(value.trim()); 28 28 + if (iso) { 29 29 + const d = new Date(parseInt(iso[1]), parseInt(iso[2]) - 1, parseInt(iso[3])); 30 30 + if (!isNaN(d.getTime())) return d; 31 31 + } 32 32 + // MM/DD/YYYY 33 33 + const us = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(value.trim()); 34 34 + if (us) { 35 35 + const d = new Date(parseInt(us[3]), parseInt(us[1]) - 1, parseInt(us[2])); 36 36 + if (!isNaN(d.getTime())) return d; 37 37 + } 38 38 + return null; 39 39 + } 40 40 + 41 41 + /** Format date as YYYY-MM-DD. */ 42 42 + export function formatDate(d: Date): string { 43 43 + const y = d.getFullYear(); 44 44 + const m = String(d.getMonth() + 1).padStart(2, '0'); 45 45 + const day = String(d.getDate()).padStart(2, '0'); 46 46 + return `${y}-${m}-${day}`; 47 47 + } 48 48 + 49 49 + /** 50 50 + * Create and show a date picker popup anchored to a cell element. 51 51 + * Returns a cleanup function to remove the popup. 52 52 + */ 53 53 + export function showDatePicker( 54 54 + anchorEl: HTMLElement, 55 55 + initialValue: string, 56 56 + opts: DatePickerOptions, 57 57 + ): () => void { 58 58 + const parsed = parseDateValue(initialValue); 59 59 + let viewDate = parsed || new Date(); 60 60 + const selectedDate = parsed ? new Date(parsed) : null; 61 61 + 62 62 + const container = document.createElement('div'); 63 63 + container.className = 'date-picker'; 64 64 + container.setAttribute('role', 'dialog'); 65 65 + container.setAttribute('aria-label', 'Date picker'); 66 66 + 67 67 + function render() { 68 68 + const year = viewDate.getFullYear(); 69 69 + const month = viewDate.getMonth(); 70 70 + const firstDay = new Date(year, month, 1).getDay(); 71 71 + const daysInMonth = new Date(year, month + 1, 0).getDate(); 72 72 + const today = new Date(); 73 73 + 74 74 + let html = '<div class="dp-header">'; 75 75 + html += `<button class="dp-nav" data-dir="-1" aria-label="Previous month">\u25C0</button>`; 76 76 + html += `<span class="dp-title">${MONTHS[month]} ${year}</span>`; 77 77 + html += `<button class="dp-nav" data-dir="1" aria-label="Next month">\u25B6</button>`; 78 78 + html += '</div>'; 79 79 + 80 80 + html += '<div class="dp-grid">'; 81 81 + for (const day of DAYS) { 82 82 + html += `<span class="dp-day-header">${day}</span>`; 83 83 + } 84 84 + 85 85 + // Empty cells before first day 86 86 + for (let i = 0; i < firstDay; i++) { 87 87 + html += '<span class="dp-empty"></span>'; 88 88 + } 89 89 + 90 90 + for (let d = 1; d <= daysInMonth; d++) { 91 91 + const isToday = d === today.getDate() && month === today.getMonth() && year === today.getFullYear(); 92 92 + const isSelected = selectedDate && d === selectedDate.getDate() && month === selectedDate.getMonth() && year === selectedDate.getFullYear(); 93 93 + const cls = ['dp-day']; 94 94 + if (isToday) cls.push('dp-today'); 95 95 + if (isSelected) cls.push('dp-selected'); 96 96 + html += `<button class="${cls.join(' ')}" data-day="${d}">${d}</button>`; 97 97 + } 98 98 + 99 99 + html += '</div>'; 100 100 + 101 101 + // Today button 102 102 + html += '<div class="dp-footer"><button class="dp-today-btn">Today</button></div>'; 103 103 + 104 104 + container.innerHTML = html; 105 105 + } 106 106 + 107 107 + render(); 108 108 + 109 109 + // Position near the anchor cell 110 110 + const rect = anchorEl.getBoundingClientRect(); 111 111 + container.style.position = 'absolute'; 112 112 + container.style.left = rect.left + 'px'; 113 113 + container.style.top = (rect.bottom + 2) + 'px'; 114 114 + container.style.zIndex = '1003'; 115 115 + document.body.appendChild(container); 116 116 + 117 117 + // Adjust if off-screen 118 118 + requestAnimationFrame(() => { 119 119 + const cr = container.getBoundingClientRect(); 120 120 + if (cr.right > window.innerWidth) { 121 121 + container.style.left = (window.innerWidth - cr.width - 8) + 'px'; 122 122 + } 123 123 + if (cr.bottom > window.innerHeight) { 124 124 + container.style.top = (rect.top - cr.height - 2) + 'px'; 125 125 + } 126 126 + }); 127 127 + 128 128 + // Event handlers 129 129 + function handleClick(e: MouseEvent) { 130 130 + const target = e.target as HTMLElement; 131 131 + 132 132 + // Navigation 133 133 + const nav = target.closest('.dp-nav') as HTMLElement | null; 134 134 + if (nav) { 135 135 + const dir = parseInt(nav.dataset.dir || '0'); 136 136 + viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + dir, 1); 137 137 + render(); 138 138 + return; 139 139 + } 140 140 + 141 141 + // Day selection 142 142 + const dayBtn = target.closest('.dp-day') as HTMLElement | null; 143 143 + if (dayBtn && dayBtn.dataset.day) { 144 144 + const d = new Date(viewDate.getFullYear(), viewDate.getMonth(), parseInt(dayBtn.dataset.day)); 145 145 + opts.onSelect(formatDate(d)); 146 146 + cleanup(); 147 147 + return; 148 148 + } 149 149 + 150 150 + // Today button 151 151 + if (target.closest('.dp-today-btn')) { 152 152 + opts.onSelect(formatDate(new Date())); 153 153 + cleanup(); 154 154 + return; 155 155 + } 156 156 + } 157 157 + 158 158 + function handleOutsideClick(e: MouseEvent) { 159 159 + if (!container.contains(e.target as Node)) { 160 160 + cleanup(); 161 161 + } 162 162 + } 163 163 + 164 164 + container.addEventListener('click', handleClick); 165 165 + // Delay the outside click listener to avoid immediate close 166 166 + setTimeout(() => document.addEventListener('click', handleOutsideClick), 0); 167 167 + 168 168 + function cleanup() { 169 169 + container.removeEventListener('click', handleClick); 170 170 + document.removeEventListener('click', handleOutsideClick); 171 171 + container.remove(); 172 172 + opts.onClose(); 173 173 + } 174 174 + 175 175 + return cleanup; 176 176 + }

+13

src/sheets/main.ts

reviewed

··· 19 19 import { multiColumnSort } from './sort.js'; 20 20 import { evaluateRules, buildCfStyle, computeColorScale } from './conditional-format.js'; 21 21 import { isErrorValue, getErrorInfo, formatErrorTooltip } from './error-tooltips.js'; 22 22 + import { parseDateValue, showDatePicker } from './date-picker.js'; 22 23 import { validateCell, getDropdownItems, parseListItems } from './data-validation.js'; 23 24 import { buildBorderStyle, applyBorderPreset, getWrapStyle, getStripedRowClass } from './cell-styles.js'; 24 25 import { computeSelectionStats, formatStatValue } from './status-bar.js'; ··· 1360 1361 // Initial highlight/range update (with range colors — editing active) 1361 1362 updateFormulaHighlight(value, true); 1362 1363 updateFormulaRangeHighlights(value); 1364 1364 + 1365 1365 + // Show date picker for date-like values (#123) 1366 1366 + if (!cellData?.f && parseDateValue(String(value))) { 1367 1367 + showDatePicker(td as HTMLElement, String(value), { 1368 1368 + onSelect: (dateStr) => { 1369 1369 + input.value = dateStr; 1370 1370 + formulaInput.value = dateStr; 1371 1371 + commitEdit(); 1372 1372 + }, 1373 1373 + onClose: () => {}, 1374 1374 + }); 1375 1375 + } 1363 1376 } 1364 1377 1365 1378 function commitEdit() {

+88

tests/date-picker.test.ts

reviewed

··· 1 1 + import { describe, it, expect } from 'vitest'; 2 2 + import { parseDateValue, formatDate } from '../src/sheets/date-picker.js'; 3 3 + 4 4 + describe('parseDateValue', () => { 5 5 + it('parses YYYY-MM-DD format', () => { 6 6 + const d = parseDateValue('2026-03-15'); 7 7 + expect(d).not.toBeNull(); 8 8 + expect(d!.getFullYear()).toBe(2026); 9 9 + expect(d!.getMonth()).toBe(2); // 0-indexed 10 10 + expect(d!.getDate()).toBe(15); 11 11 + }); 12 12 + 13 13 + it('parses single-digit month and day', () => { 14 14 + const d = parseDateValue('2026-1-5'); 15 15 + expect(d).not.toBeNull(); 16 16 + expect(d!.getMonth()).toBe(0); 17 17 + expect(d!.getDate()).toBe(5); 18 18 + }); 19 19 + 20 20 + it('parses MM/DD/YYYY format', () => { 21 21 + const d = parseDateValue('03/15/2026'); 22 22 + expect(d).not.toBeNull(); 23 23 + expect(d!.getFullYear()).toBe(2026); 24 24 + expect(d!.getMonth()).toBe(2); 25 25 + expect(d!.getDate()).toBe(15); 26 26 + }); 27 27 + 28 28 + it('parses single-digit MM/DD/YYYY', () => { 29 29 + const d = parseDateValue('1/5/2026'); 30 30 + expect(d).not.toBeNull(); 31 31 + expect(d!.getMonth()).toBe(0); 32 32 + expect(d!.getDate()).toBe(5); 33 33 + }); 34 34 + 35 35 + it('trims whitespace', () => { 36 36 + const d = parseDateValue(' 2026-03-15 '); 37 37 + expect(d).not.toBeNull(); 38 38 + expect(d!.getDate()).toBe(15); 39 39 + }); 40 40 + 41 41 + it('returns null for empty string', () => { 42 42 + expect(parseDateValue('')).toBeNull(); 43 43 + }); 44 44 + 45 45 + it('returns null for non-date string', () => { 46 46 + expect(parseDateValue('hello')).toBeNull(); 47 47 + }); 48 48 + 49 49 + it('returns null for number string', () => { 50 50 + expect(parseDateValue('12345')).toBeNull(); 51 51 + }); 52 52 + 53 53 + it('returns null for null', () => { 54 54 + expect(parseDateValue(null as unknown as string)).toBeNull(); 55 55 + }); 56 56 + 57 57 + it('returns null for undefined', () => { 58 58 + expect(parseDateValue(undefined as unknown as string)).toBeNull(); 59 59 + }); 60 60 + 61 61 + it('returns null for partial date', () => { 62 62 + expect(parseDateValue('2026-03')).toBeNull(); 63 63 + }); 64 64 + }); 65 65 + 66 66 + describe('formatDate', () => { 67 67 + it('formats a date as YYYY-MM-DD', () => { 68 68 + const d = new Date(2026, 2, 15); // March 15, 2026 69 69 + expect(formatDate(d)).toBe('2026-03-15'); 70 70 + }); 71 71 + 72 72 + it('pads single-digit month and day', () => { 73 73 + const d = new Date(2026, 0, 5); // January 5, 2026 74 74 + expect(formatDate(d)).toBe('2026-01-05'); 75 75 + }); 76 76 + 77 77 + it('handles December 31', () => { 78 78 + const d = new Date(2026, 11, 31); 79 79 + expect(formatDate(d)).toBe('2026-12-31'); 80 80 + }); 81 81 + 82 82 + it('roundtrips with parseDateValue', () => { 83 83 + const original = '2026-06-20'; 84 84 + const parsed = parseDateValue(original); 85 85 + expect(parsed).not.toBeNull(); 86 86 + expect(formatDate(parsed!)).toBe(original); 87 87 + }); 88 88 + });