date selector

web/src/Classification.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Sparkles, ShieldCheck, Check, X, ArrowRight } from "lucide-react";
 import type { Dataset, Enrichment, Preview, State } from "./api";
 import { categoryPath, request } from "./api";
-import { Empty, ErrorMessage, Field, Modal } from "./ui";
+import { DateField, Empty, ErrorMessage, Field, Modal } from "./ui";
 export function Classification({
   state,
   acceptState,
@@ -92,6 +92,12 @@ export function Classification({
             className="form-body"
             onSubmit={async (e) => {
               e.preventDefault();
+              // The month-name picker is not a native date control, so the
+              // range is validated here instead of by form constraints.
+              if (!from || !to) {
+                setError("Choose a start and an end date for the range.");
+                return;
+              }
               setBusy(true);
               setError("");
               try {
@@ -132,24 +138,18 @@ export function Classification({
             }}
           >
             <div className="two-columns">
-              <Field label="From">
-                <input
-                  required
-                  type="date"
-                  max={to || undefined}
-                  value={from}
-                  onChange={(e) => setFrom(e.target.value)}
-                />
-              </Field>
-              <Field label="To">
-                <input
-                  required
-                  type="date"
-                  min={from || undefined}
-                  value={to}
-                  onChange={(e) => setTo(e.target.value)}
-                />
-              </Field>
+              <DateField
+                label="From"
+                value={from}
+                max={to || undefined}
+                onChange={setFrom}
+              />
+              <DateField
+                label="To"
+                value={to}
+                min={from || undefined}
+                onChange={setTo}
+              />
             </div>
             <Field
               label="Model"