Forms
Date and time inputs
Use styled native date, time, datetime-local, month, and week pickers without JavaScript.
Forms
Date and time inputs
Apply .bs-input to native date and time types to retain platform pickers, locale formatting, validation, and mobile keyboards.
Date input
HTML · Date input
<div class="bs-form-group">
<label class="bs-label" for="start-date">Start date</label>
<input class="bs-input" id="start-date" name="start_date" type="date" min="2026-01-01" />
</div>Time input
HTML · Time input
<div class="bs-form-group">
<label class="bs-label" for="start-time">Start time</label>
<input class="bs-input" id="start-time" name="start_time" type="time" step="900" />
</div>Local date and time
HTML · Datetime-local input
<div class="bs-form-group">
<label class="bs-label" for="publish-at">Publish at</label>
<input class="bs-input" id="publish-at" name="publish_at" type="datetime-local" />
</div>Month input
HTML · Month input
<div class="bs-form-group">
<label class="bs-label" for="billing-month">Billing month</label>
<input class="bs-input" id="billing-month" name="billing_month" type="month" />
</div>Week input
HTML · Week input
<div class="bs-form-group">
<label class="bs-label" for="delivery-week">Delivery week</label>
<input class="bs-input" id="delivery-week" name="delivery_week" type="week" />
</div>Invalid date
Deployment date must be set in the future.
HTML · Invalid date input
<div class="bs-form-group">
<label class="bs-label" for="scheduled-date">
Scheduled deployment <span class="bs-label-required" aria-hidden="true">*</span>
</label>
<input
class="bs-input"
id="scheduled-date"
name="scheduled_date"
type="date"
value="2025-01-01"
aria-invalid="true"
aria-describedby="date-error"
required
/>
<span class="bs-form-feedback bs-form-feedback-invalid" id="date-error">
Deployment date must be set in the future.
</span>
</div>Server handling: native date values submit as date-like strings without a timezone. Treat
datetime-local as local wall time and collect a timezone separately when the instant matters.Date & Time Controls API
Native date and time pickers inherit standard control styling, focus rings, calendar indicators, and validation states.
| Class / Type | Purpose |
|---|---|
.bs-input | Applies standard height, padding, theme background, border, and focus states to date and time controls. |
type="date" | Native calendar date picker formatted as YYYY-MM-DD. |
type="time" | Native 12h or 24h time picker with optional minute and second stepping. |
type="datetime-local" | Combined date and wall-clock time picker without timezone offset. |
type="month" | Year and month selector formatted as YYYY-MM. |
type="week" | Year and week-number selector formatted as YYYY-Www. |
.bs-form-group | Vertical grid layout binding label, date control, helper text, and error messages. |
.bs-label | Associated field label for date and time inputs. |
.bs-form-feedback-invalid | Error message text describing invalid date ranges or missing required choices. |