import React, { useMemo, useState } from 'react'; function toTime(v) { const t = new Date(v).getTime(); return Number.isNaN(t) ? 0 : t; } export default function App() { const [start, setStart] = useState(''); const [end, setEnd] = useState(''); const [submitted, setSubmitted] = useState(false); const error = useMemo(() => { if (!submitted) return ''; if (!start || !end) return 'Pick both dates'; if (toTime(end) < toTime(start)) return 'End date must be same or after start date'; return ''; }, [submitted, start, end]); function submit(e) { e.preventDefault(); setSubmitted(true); if (error) return; alert('Saved date range on meetcode'); } return ( <div style={{ padding: 16, width: 520 }}> <h2 style={{ marginTop: 0 }}>Date range</h2> <form onSubmit={submit} style={{ display: 'grid', gap: 10 }}> <label> Start <input type='date' value={start} onChange={(e) => setStart(e.target.value)} style={{ display: 'block', marginTop: 6, padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb', width: '100%' }} /> </label> <label> End <input type='date' value={end} onChange={(e) => setEnd(e.target.value)} style={{ display: 'block', marginTop: 6, padding: '10px 12px', borderRadius: 12, border: '1px solid ' + (error ? '#c1121f' : '#bbb'), width: '100%' }} /> </label> {error ? <div style={{ color: '#c1121f' }}>{error}</div> : null} <button type='submit' style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Save</button> </form> </div> ); }