DatePicker
in namespace DotVVM.Controls.Tailwind.Controls
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;
}
}
}