DateTimePicker
in namespace DotVVM.Controls.Tailwind.Controls
A standalone date/time picker control backed by AIR Datepicker. Binds to a nullable DateTime property using DotVVM serialization.
Usage & Scenarios
The DatePicker documentation covers the current DateTimePicker and DateTimePickerFormField controls. They render Tailwind-styled date, time, and date-time pickers with nullable DateTime bindings.
Sample 1: Standalone Date, Time, and DateTime Pickers
Use DateTimePicker when you need the picker widget without a form-field wrapper. The SelectedValue property is always a nullable DateTime.
<div class="space-y-3 max-w-md">
<t:DateTimePicker SelectedValue="{value: MeetingDate}"
Type="Date"
Placeholder="Choose a date..." />
<t:DateTimePicker SelectedValue="{value: MeetingTime}"
Type="Time"
TimeFormat="HH:mm"
Placeholder="Choose a time..." />
<t:DateTimePicker SelectedValue="{value: PublishedAt}"
Type="DateTime"
DateFormat="dd.MM.yyyy"
TimeFormat="hh:mm tt"
Culture="cs-CZ"
Placeholder="Choose date and time..." />
</div>
<p>Date: <strong>{{value: MeetingDate}}</strong></p>
<p>Time: <strong>{{value: MeetingTime}}</strong></p>
<p>Date and time: <strong>{{value: PublishedAt}}</strong></p>
using DotVVM.Framework.ViewModel;
using System;
namespace DotvvmWeb.Views.Docs.Controls.tailwind.DatePicker.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime? MeetingDate { get; set; } = new DateTime(2026, 7, 1);
public DateTime? MeetingTime { get; set; } = new DateTime(2026, 1, 1, 9, 30, 0);
public DateTime? PublishedAt { get; set; } = new DateTime(2026, 7, 1, 14, 0, 0);
}
}
Sample 2: Constraints, Steps, and Enabled State
The standalone picker also supports MinDate, MaxDate, MinHours, MaxHours, HoursStep, MinutesStep, InputSize, and Enabled.
<div class="space-y-3 max-w-md">
<t:CheckBox Text="Enable pickers" Checked="{value: PickerEnabled}" />
<t:DateTimePicker SelectedValue="{value: VacationDate}"
Type="Date"
MinDate="{value: MinDate}"
MaxDate="{value: MaxDate}"
Placeholder="Vacation start"
Enabled="{value: PickerEnabled}" />
<t:DateTimePicker SelectedValue="{value: OfficeHours}"
Type="Time"
MinHours="{value: MinHours}"
MaxHours="{value: MaxHours}"
HoursStep="2"
MinutesStep="15"
InputSize="Large"
Placeholder="Office hours"
Enabled="{value: PickerEnabled}" />
</div>
<p>Allowed date window: <strong>{{value: MinDate}}</strong> – <strong>{{value: MaxDate}}</strong></p>
<p>Selected office time: <strong>{{value: OfficeHours}}</strong></p>
using DotVVM.Framework.ViewModel;
using System;
namespace DotvvmWeb.Views.Docs.Controls.tailwind.DatePicker.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public bool PickerEnabled { get; set; } = true;
public DateTime? VacationDate { get; set; } = new DateTime(2026, 8, 10);
public DateTime? OfficeHours { get; set; } = new DateTime(2026, 1, 1, 10, 0, 0);
public DateTime? MinDate { get; set; } = new DateTime(2026, 8, 1);
public DateTime? MaxDate { get; set; } = new DateTime(2026, 8, 31);
public int MinHours { get; set; } = 8;
public int MaxHours { get; set; } = 18;
}
}
Sample 3: DateTimePickerFormField
DateTimePickerFormField wraps the picker in the Tailwind form shell. It adds LabelText or LabelTemplate, Size, and ValidatorProperty.
<t:Form HeaderText="Book a session">
<ContentTemplate>
<dot:ValidationSummary IncludeErrorsFromChildren="true" />
<t:FormRow>
<t:DateTimePickerFormField LabelText="Start"
SelectedValue="{value: StartDate}"
Type="DateTime"
DateFormat="dd.MM.yyyy"
TimeFormat="HH:mm"
Placeholder="Choose date and time..."
Size="Half" />
<t:DateTimePickerFormField SelectedValue="{value: ReminderTime}"
Type="Time"
InputSize="Small"
ValidatorProperty="{value: ReminderTime}"
Size="Half">
<LabelTemplate>
<span>Reminder time <strong>(required)</strong></span>
</LabelTemplate>
</t:DateTimePickerFormField>
</t:FormRow>
</ContentTemplate>
<FooterTemplate>
<t:Button Text="Save"
Type="Primary"
Click="{command: Save()}"
Validation.Target="{value: _root}" />
</FooterTemplate>
</t:Form>
<div Visible="{value: Saved}" class="mt-3">
<t:Alert Type="Success" Text="Session saved." />
</div>
using DotVVM.Framework.ViewModel;
using System;
using System.ComponentModel.DataAnnotations;
namespace DotvvmWeb.Views.Docs.Controls.tailwind.DatePicker.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime? StartDate { get; set; } = new DateTime(2026, 9, 15, 13, 30, 0);
[Required]
public DateTime? ReminderTime { get; set; }
public bool Saved { get; set; }
public void Save()
{
Saved = true;
}
}
}
Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
Culture | String | Gets or sets the culture name used for localization. When omitted, is used. |
attribute
static value
|
null |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
DateFormat | String | Gets or sets the .NET date format string used for display. Supported tokens: d, M, and y. |
attribute
static value
|
null |
|
Enabled | Boolean | Gets or sets whether the input is enabled. |
attribute
static value
bindable
|
null |
|
HoursStep | Int32? | Gets or sets the hour step used by the time picker. |
attribute
static value
|
null |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
static value
bindable
|
True |
|
InputSize | InputSize | Gets or sets the visual input size. |
attribute
static value
bindable
|
Default |
|
MaxDate | DateTime? | Gets or sets the maximum selectable date and time. |
attribute
static value
bindable
|
null |
|
MaxHours | Int32 | Gets or sets the maximum selectable hour when time selection is enabled. |
attribute
static value
bindable
|
null |
|
MinDate | DateTime? | Gets or sets the minimum selectable date and time. |
attribute
static value
bindable
|
null |
|
MinHours | Int32 | Gets or sets the minimum selectable hour when time selection is enabled. |
attribute
static value
bindable
|
null |
|
MinutesStep | Int32? | Gets or sets the minute step used by the time picker. |
attribute
static value
|
null |
|
Placeholder | String | Gets or sets the placeholder text shown when no value is selected. |
attribute
static value
bindable
|
null |
|
SelectedValue | IValueBinding<DateTime?> | Gets or sets the selected date and time value bound to the control. |
attribute
bindable
|
null |
|
TimeFormat | String | Gets or sets the .NET time format string used for display. Accepted tokens are limited to h, H, m, s, and t. |
attribute
static value
|
null |
|
Type | DateTimePickerType | Gets or sets whether the control displays a date picker, time picker, or both. |
attribute
static value
|
Date |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
static value
bindable
|
True |