Tutorial: Date & Time Picker — Blazor

IsabyteDateSelector, IsabyteTimeSelector, IsabyteDateTimeSelector, and IsabyteDateRangeSelector — format strings, range constraints, and culture. Package: Isabyte.PowerTools.Blazor.

Which Control Should I Use?

• IsabyteDateSelector — date only (yyyy-MM-dd).
• IsabyteTimeSelector — time only (HH:mm), 12- or 24-hour.
• IsabyteDateTimeSelector — combined date + time in a single control.
• IsabyteDateRangeSelector — two coupled date pickers for "from – to".

Step 1 — A Basic Date Picker (date-selector)

Value is DateTime?, so null means "nothing selected yet".

<IsabyteDateSelector @bind-Value="_birthday" />

@code {
    private DateTime? _birthday;
}

Step 2 — Constrain the Range

Pass Min/Max as DateTime? to grey out invalid days — enforced visually and against keyboard entry.

<!-- Birthday: must be in the past, at most 120 years ago -->
<IsabyteDateSelector @bind-Value="_birthday"
                 Min="DateTime.Today.AddYears(-120)"
                 Max="DateTime.Today" />

<!-- Booking: only future dates -->
<IsabyteDateSelector @bind-Value="_checkInDate"
                 Min="DateTime.Today"
                 Placeholder="Check-in date" />

Step 3 — Format the Displayed Value

Format takes a custom DateTime pattern built from y/M/d/H/ h/m/s/t (plus the d and D standard specifiers). It controls how the date renders; the underlying bound value is always a real DateTime. Other single-letter standard specifiers are not interpreted, so spell the pattern out.

Format controls structure; the component's own locale controls language. IsabyteLanguage gives the user a culture picker, but the app still has to tell the components about the change — the demo host does that with a small script that forwards the chosen culture on.

Step 4 — Time Pickers (time-selector)

IsabyteTimeSelector binds a TimeSpan?. Use HourStep/MinuteStep to constrain increments.

<IsabyteTimeSelector @bind-Value="_meetingStart"
                 Format="HH:mm"
                 MinuteStep="15"
                 Use24HourFormat="true" />

@code {
    private TimeSpan? _meetingStart = new TimeSpan(9, 0, 0);
}

Switch to Use24HourFormat="false" for an AM/PM toggle, paired with a format string like h:mm tt.

Step 5 — Combined Date + Time (date-time-selector)

<IsabyteDateTimeSelector @bind-Value="_appointment"
                     Format="yyyy-MM-dd HH:mm"
                     MinDate="DateTime.Today"
                     MaxDate="DateTime.Today.AddMonths(3)"
                     MinHour="8"
                     MaxHour="18"
                     Placeholder="Pick an appointment slot" />

@code {
    private DateTime? _appointment;
}

Note the parameter names differ from IsabyteDateSelector: MinDate/ MaxDate rather than Min/Max, since there are also MinHour/ MaxHour for the time part.

Step 6 — Date Ranges

<IsabyteDateRangeSelector @bind-StartDate="_from"
                      @bind-EndDate="_to"
                      StartPlaceholder="Check-in"
                      EndPlaceholder="Check-out" />

@code {
    private DateTime? _from;
    private DateTime? _to;
}

Two-way binding uses the field-specific form (@bind-StartDate, @bind-EndDate) since there's no single Value — the control exposes a pair. OnRangeSelected fires once both ends are chosen.

Common Gotchas

• DateTimeKind matters. Both selectors emit DateTimeKind.Unspecified values — decide explicitly whether to interpret them as local or UTC.
• Min/Max are inclusive. Use DateTime.Today.AddDays(-1) for a strict "must be in the past" rule.
• TimeSpan can exceed 24h. IsabyteTimeSelector.Value has no built-in cap; always normalize inputs set programmatically.

Next

• Tutorial: Form Controls
• Tutorial: Image Processing