More datetime field resets in Reboot

Plus a docs update

Co-Authored-By: Jonas Pardeyke <142009152+pardeyke@users.noreply.github.com>

diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index a0e49251f7e3df68f18fd46c16582b8da40de59f..6d37eedea379534e3091973f8657096d76b020be 100644 (file)
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -542,9 +542,13 @@ $reboot-mark-tokens: defaults(
 
   ::-webkit-datetime-edit-fields-wrapper,
   ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-second-field,
   ::-webkit-datetime-edit-minute-field,
   ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-ampm-field,
   ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-week-field,
   ::-webkit-datetime-edit-month-field,
   ::-webkit-datetime-edit-year-field {
     padding: 0;

diff --git a/site/src/content/docs/forms/form-control.mdx b/site/src/content/docs/forms/form-control.mdx
index abfcc2327c7974378ff83dbd58a12c5c8096aae5..493dbc59c692ef2fdcc43ad8e138cef069425a67 100644 (file)
--- a/site/src/content/docs/forms/form-control.mdx
+++ b/site/src/content/docs/forms/form-control.mdx
@@ -221,6 +221,18 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 
 Nearly all input types are supported, but not all are documented here. Input types requiring additional classes or changes are shown below.
 
+### Date and time
+
+No additional classes are needed for date and time inputs. Exact functionality and appearance are dependent on the browser and operating system.
+
+<Example class="vstack gap-3" code={`<input type="datetime-local" class="form-control" aria-label="Date and time picker" value="2026-02-24T13:00">
+<input type="datetime-local" class="form-control" aria-label="Date and time picker with seconds" value="2026-02-24T13:00:30" step="1">
+<input type="datetime-local" class="form-control" aria-label="Date and time picker with milliseconds" value="2026-02-24T13:00:30.500" step="0.001">
+<input type="date" class="form-control" aria-label="Date picker" value="2026-02-24">
+<input type="time" class="form-control" aria-label="Time picker" value="13:00">
+<input type="month" class="form-control" aria-label="Month picker" value="2026-02">
+<input type="week" class="form-control" aria-label="Week picker" value="2026-W09">`} />
+
 ### Color
 
 Set the `type="color"` and add `.form-control-color` to the `<input>` alongside `.form-control`. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.