BOBInputDateTime
Generic input for DateOnly, TimeOnly, DateTime, and DateTimeOffset. Culture-aware parsing and validation, plus standalone pickers.
API reference ↗Basic usage
05/03/2026 12:00 AM
Select date and time
RAZOR
<BOBInputDateTime TValue="DateTime ?" @bind-Value="_dateBasic" Label="Basic" HelperText="Select date and time" />Date Input
Use TValue="DateOnly" for date-only input.
05/03/2026
RAZOR
TValue="DateOnly"</code> for date-only input.""")">
<BOBInputDateTime TValue="DateOnly ?" @bind-Value="_date" Label="Only Date" />Time Input
Use TValue="TimeOnly" for time-only input.
02:30 PM
RAZOR
TValue="TimeOnly"</code> for time-only input.""")">
<BOBInputDateTime TValue="TimeOnly ?" @bind-Value="_time" Label="Only time" />Variants
05/03/2026 05:34 PM
05/03/2026 05:34 PM
05/03/2026 05:34 PM
RAZOR
<BOBInputDateTime @bind-Value="_outlinedValue" Label="Outlined" Variant="BOBInputVariant.Outlined" />
<BOBInputDateTime @bind-Value="_filledValue" Label="Filled" Variant="BOBInputVariant.Filled" />
<BOBInputDateTime @bind-Value="_standardValue" Label="Standard" Variant="BOBInputVariant.Standard" />Sizes
05/03/2026 05:34 PM
05/03/2026 05:34 PM
05/03/2026 05:34 PM
RAZOR
<BOBInputDateTime @bind-Value="_smallValue" Label="Small" Size="BOBSize.Small" />
<BOBInputDateTime @bind-Value="_mediumValue" Label="Medium (Default)" Size="BOBSize.Medium" />
<BOBInputDateTime @bind-Value="_largeValue" Label="Large" Size="BOBSize.Large" />Color & Background
05/03/2026 05:34 PM
RAZOR
<BOBInputDateTime @bind-Value="_colorValue" Label="Custom Color & Background" Color="@PaletteColor.Secondary" BackgroundColor="@PaletteColor.SecondaryContrast" />Prefix & Suffix
05/03/2026 05:34 PM
05/03/2026 05:34 PM
RAZOR
<BOBInputDateTime @bind-Value="_prefixValue" Label="With Prefix Icon"
PrefixIcon="@BOBIconKeys.MaterialIconsOutlined.i_palette" PrefixBackgroundColor="white" PrefixColor="black" />
<BOBInputDateTime @bind-Value="_suffixValue" Label="With Prefix Icon"
SuffixIcon="@BOBIconKeys.MaterialIconsOutlined.i_palette" SuffixBackgroundColor="white" SuffixColor="black" />Shadow
05/03/2026 05:34 PM
05/03/2026 05:34 PM
RAZOR
<BOBInputDateTime @bind-Value="_shadowValue" Variant="BOBInputVariant.Outlined" Label="Elevation Shadow" Shadow="@BOBShadowPresets.Elevation(2)" />
<BOBInputDateTime @bind-Value="_shadowValue" Variant="BOBInputVariant.Outlined" Label="Custom Shadow" Shadow="@(ShadowStyle.Create(5, 10, 0.14f, color: "purple"))" />States
05/03/2026 05:34 PM
Required
05/03/2026 05:34 PM
Disabled
05/03/2026 05:34 PM
ReadOnly
RAZOR
<BOBInputDateTime @bind-Value="_requiredValue" Label="Required" Required="true" HelperText="Required" />
<BOBInputDateTime @bind-Value="_disabledValue" Label="Disabled" Disabled="true" HelperText="Disabled" />
<BOBInputDateTime @bind-Value="_readOnlyValue" Label="Read Only" ReadOnly="true" HelperText="ReadOnly" />Date Picker
BOBDatePicker is a calendar-only component (no input).
Density parameter affects datepicker spacing
May 2026
SuMoTuWeThFrSa
May 2026
SuMoTuWeThFrSa
May 2026
SuMoTuWeThFrSa
RAZOR
<BOBDatePicker Density="BOBDensity.Compact" @bind-Value="_pickerDate" />
<BOBDatePicker Density="BOBDensity.Standard" @bind-Value="_pickerDate" />
<BOBDatePicker Density="BOBDensity.Comfortable" @bind-Value="_pickerDate" />Time Picker
BOBTimePicker is a clock-only component (no input).
RAZOR
<BOBTimePicker Density="BOBDensity.Compact" @bind-Value="_pickerTime" />
<BOBTimePicker Density="BOBDensity.Standard" @bind-Value="_pickerTime" />
<BOBTimePicker Density="BOBDensity.Comfortable" @bind-Value="_pickerTime" />Properties
17 rows.
| Property | Type | Default | Description |
|---|---|---|---|
Size | BOBSize | BOBSize.Medium | Visual size of the input. |
Loading | bool | | When , the input shows a loading indicator. |
LoadingIndicatorVariant | BOBLoadingIndicatorVariant | BOBLoadingIndicatorVariant.CircularProgress | Variant of the loading indicator shown when is . |
Density | BOBDensity | BOBDensity.Standard | Vertical density (gap) of the input. |
Shadow | ShadowStyle? | | Shadow style applied to the input container. |
BackgroundColor | string? | | Background color of the input. Accepts any valid CSS color value. |
Color | string? | | Text color of the input. Accepts any valid CSS color value. |
PrefixText | string? | | Text displayed before the input value. |
PrefixIcon | IconKey? | | Material icon name for the Prefix. |
PrefixColor | string? | | Prefix color. Accepts any valid CSS color value. |
PrefixBackgroundColor | string? | | PrefixBackground color. Accepts any valid CSS color value. |
SuffixText | string? | | Text displayed after the input value. |
SuffixIcon | IconKey? | | Material icon name for the Suffix. |
SuffixColor | string? | | Suffix color. Accepts any valid CSS color value. |
SuffixBackgroundColor | string? | | SuffixBackground color. Accepts any valid CSS color value. |
Label | string? | | Floating label displayed above the input when it has a value or focus. |
HelperText | string? | | Helper text displayed below the component for additional context. |