AirDatePicker

in namespace DotVVM.Bootstrap5.AirDatePicker.Controls

A Bootstrap 5-styled date/time picker backed by AIR Datepicker.

Usage & Scenarios

Renders a Bootstrap 5-styled input using the AIR Datepicker widget. It supports date, time, and combined date-time selection with a nullable DateTime SelectedValue binding.

Install the DotVVM.Controls.Bootstrap5.AirDatePicker package and register it in DotvvmStartup.cs after Bootstrap 5:

config.AddBootstrap5Configuration();
config.AddBootstrap5AirDatePickerConfiguration();

Use Type to choose Date, Time, or DateTime. DateFormat and TimeFormat use .NET format strings; supported date tokens are d, dd, MMM, MMMM, yy, and yyyy, and supported time tokens are h, hh, H, HH, m, mm, and tt.

Sample 1: Date, Time, and Date-Time Pickers

Use AirDatePicker with the default Date type for dates, or set Type to Time or DateTime. MinHours, MaxHours, and MinutesStep constrain time selection.

page.dothtml
ViewModel.cs

<div class="d-grid gap-3" style="max-width: 28rem">
    <bs:AirDatePicker SelectedValue="{value: MeetingDate}"
                      Placeholder="Choose a date" />

    <bs:AirDatePicker SelectedValue="{value: MeetingTime}"
                      Type="Time"
                      TimeFormat="HH:mm"
                      MinHours="8"
                      MaxHours="18"
                      MinutesStep="15"
                      Placeholder="Choose a time" />

    <bs:AirDatePicker SelectedValue="{value: PublishedAt}"
                      Type="DateTime"
                      DateFormat="dd.MM.yyyy"
                      TimeFormat="HH:mm"
                      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.bootstrap5_airdatepicker.AirDatePicker.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);
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
ClientIDMode	ClientIDMode ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
Culture	String String	Gets or sets the culture name used for localization. When omitted, is used.	attribute inner element static value bindable default	null
DataContext	Object 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 inner element static value bindable default	null
DateFormat	String String	Gets or sets the .NET date format string used for display. Supported tokens: d, M, and y.	attribute inner element static value bindable default	null
Enabled	Boolean Boolean	Gets or sets whether the input is enabled.	attribute inner element static value bindable default	null
HoursStep	Int32? Int32?	Gets or sets the hour step used by the time picker.	attribute inner element static value bindable default	null
ID	String String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
MaxDate	DateTime? DateTime?	Gets or sets the maximum selectable date and time.	attribute inner element static value bindable default	null
MaxHours	Int32 Int32	Gets or sets the maximum selectable hour when time selection is enabled.	attribute inner element static value bindable default	null
MinDate	DateTime? DateTime?	Gets or sets the minimum selectable date and time.	attribute inner element static value bindable default	null
MinHours	Int32 Int32	Gets or sets the minimum selectable hour when time selection is enabled.	attribute inner element static value bindable default	null
MinutesStep	Int32? Int32?	Gets or sets the minute step used by the time picker.	attribute inner element static value bindable default	null
Placeholder	String String	Gets or sets the placeholder text shown when no value is selected.	attribute inner element static value bindable default	null
SelectedValue	IValueBinding<DateTime?> IValueBinding<DateTime?>	Gets or sets the selected date and time value bound to the control.	attribute inner element static value bindable default	null
Size	Size Size	Gets or sets the size of the input.	attribute inner element static value bindable default	Default
TimeFormat	String String	Gets or sets the .NET time format string used for display. Accepted tokens are limited to h, H, m, s, and t.	attribute inner element static value bindable default	null
Type	AirDatePickerType AirDatePickerType	Gets or sets whether the control displays a date picker, time picker, or both.	attribute inner element static value bindable default	Date
Visible	Boolean Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Edit on Github

AirDatePicker

Usage & Scenarios

Sample 1: Date, Time, and Date-Time Pickers

Properties

HTML produced by the control

On this page

AirDatePicker

Usage & Scenarios

Sample 1: Date, Time, and Date-Time Pickers

Properties

HTML produced by the control

On this page

Information about cookies