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 a textbox control which lets the user either to type the date, or select it from a calendar popup.

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.

The language of the calendar and the first day of the week is specified by the request culture. You can find more info in the Globalization tutorial.

<bs:DateTimePicker Value="{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