Edit on Github

DateTimePicker

in namespace DotVVM.Bootstrap5.Controls

Renders a DateTimePicker control which lets the user either to type the date, or select it from a calendar pop-up.

Usage & Scenarios

Renders an input control which lets the user either to type the date/time value, or select it from a calendar popup.

In contrast to Bootstrap for DotVVM 3 and 4 where the control was a custom JavaScript-based implementation of the date/time picker experience, starting from version 5 the control is just a styled <input type="datetime-local" />.

Sample 1: Basic Usage

Use the Value property to get or set the selected date.

The control shares some properties with a TextBox. You can change its size with a Size property and change the state with the Enabled property. Additionally, you can set a command when the input changes with the TextInput property.

Since the control is just a styled HTML input element, the culture of the calendar and the first day of week is specified by the browser configuration, not by the request culture on the server.

<bs:DateTimePicker SelectedDate="{value: SelectedValue}"
                   MinDate="{value: MinValue}"
                   MaxDate="{value: MaxValue}"
                   Size="{value: Size}"
                   Changed="{staticCommand: Counter = Counter+1}" />

<p>Date changed <b>{{value: Counter}}</b> times!</p>
<dot:Button Click="{command: ChangeSize()}">Change Size</dot:Button>

public class ViewModel : DotvvmViewModelBase
{
    public Size Size { get; set; } = Size.Small;
    public DateTime SelectedValue { get; set; } = DateTime.UtcNow;
    public DateTime MinValue { get; set; } = DateTime.UtcNow.AddDays(-3);
    public DateTime MaxValue { get; set; } = DateTime.UtcNow.AddDays(3);
    public int Counter { get; set; } = 0;
    
    public ViewModel()
    {
    }

    public void ChangeSize()
    {
        if (Size == Size.Small)
        {
            Size = Size.Default;
        }
        else if (Size == Size.Default)
        {
            Size = Size.Large;
        }
        else if (Size == Size.Large)
        {
            Size = Size.Small;
        }
    }
}

Properties

Name Type Description Notes Default Value
property icon Enabled Boolean Gets or sets whether the control is enabled.
attribute
inner element
static value
bindable
default
 True
property icon MaxDate DateTime Gets or sets a maximal date that can be selected.
attribute
inner element
static value
bindable
default
 null
property icon MinDate DateTime Gets or sets a minimal date that can be selected.
attribute
inner element
static value
bindable
default
 null
property icon SelectedDate DateTime Gets or sets the date selected.
attribute
inner element
static value
bindable
default
 null
property icon Size Size Gets or sets the size of the calendar input.
attribute
inner element
static value
bindable
default
 null
property icon Title String Gets or sets the title attribute value.
attribute
inner element
static value
bindable
default
 null
property icon Visible 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

Events

Name Type Description
event icon Changed ICommandBinding Gets or sets the command that will be triggered when the control text is changed.
event icon TextInput ICommandBinding Gets or sets the command that will be triggered when the user is typing in the field. Be careful when using this event - triggering frequent postbacks can make bad user experience. Consider using static commands or a throttling postback handler.

HTML produced by the control