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.

page.dothtml
ViewModel.cs

<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;
        }
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
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 inner element static value bindable default	null
Enabled	Boolean	Gets or sets whether the control is enabled.	attribute inner element static value bindable default	True
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	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	Gets or sets a maximal date that can be selected.	attribute inner element static value bindable default	null
MinDate	DateTime	Gets or sets a minimal date that can be selected.	attribute inner element static value bindable default	null
SelectedDate	DateTime	Gets or sets the date selected.	attribute inner element static value bindable default	null
Size	Size	Gets or sets the size of the calendar input.	attribute inner element static value bindable default	null
Title	String	Gets or sets the title attribute value.	attribute inner element static value bindable default	null
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
	Changed	ICommandBinding	Gets or sets the command that will be triggered when the control text is changed.
	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.

Edit on Github

DateTimePicker

Usage & Scenarios

Sample 1: Basic Usage

Properties

Events

HTML produced by the control

On this page