DateTimePicker
in namespace DotVVM.BusinessPack.Controls
Renders a DateTimePicker control which lets the user either to type the date, or select it from a calendar popup.
Usage & Scenarios
Renders a text field that allows the user to enter or select date and time using a Gregorian-style calendar popup.
Sample 1: Basic Usage
The SelectedDateTime
property represents a DateTime
value with a date selected in the control.
<bp:DateTimePicker SelectedDateTime="{value: SelectedDate}" />
<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DateTimePicker.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime SelectedDate { get; set; } = DateTime.Now;
}
}
Sample 2: Selection Bounds
You can use the MinDateTime
and MaxDateTime
properties to specify the minimum and maximum values for the selection.
<bp:DateTimePicker SelectedDateTime="{value: SelectedDate}"
MinDateTime="{value: MinimumDate}"
MaxDateTime="{value: MaximumDate}" />
<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DateTimePicker.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime SelectedDate { get; set; } = DateTime.Now;
public DateTime MinimumDate { get; set; } = DateTime.Now.AddDays(-5);
public DateTime MaximumDate { get; set; } = DateTime.Now.AddDays(5);
}
}
Sample 3: Restrictions
If you require more granular control over what dates can be selected, you can use the Restrictions
property. We currently support the following types of restrictions:
- DayOfWeekRestriction - Allows to disable selection of a specific day of week.
- DateRangeRestriction - Allows to disable a specific range of dates (one day, one month, etc.). You just need to set the
StartDate
andEndDate
properties, where theStartDate
represents inclusive start of the restriction andEndDate
represents exclusive end of the restriction. - TimeRangeRestriction - Allows to disable selection of a specific time range. You just need to set the
StartTime
andEndTime
properties, where theStartTime
represents inclusive start of the restriction andEndTime
represents end of the restriction.
Restrictions can be combined with MinDateTime
and MaxDateTime
properties and are verified both on client-side and server-side.
<bp:DateTimePicker SelectedDateTime="{value: SelectedDate}"
Restrictions="{value: Restrictions}" />
<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using System.Collections.Generic;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DateTimePicker.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime SelectedDate { get; set; } = DateTime.Now;
public List<DateTimeRestriction> Restrictions { get; set; } = new List<DateTimeRestriction>()
{
//Theese will prevent saturdays and sundays from being selected
new DayOfWeekRestriction() { DayOfWeek = DayOfWeek.Saturday },
new DayOfWeekRestriction() { DayOfWeek = DayOfWeek.Sunday },
//This will prevent selection of all dates from the 1st of June to the 6th of June of current year
new DateRangeRestriction()
{
StartDate = new DateTime(DateTime.Today.Year, 6, 1),
EndDate = new DateTime(DateTime.Today.Year, 6, 7)
}
};
}
}
Sample 4: Show Inline
The 'ShowInline' property toggle whether the DateTimePicker is displayed inline in page or as a drop-down editor.
<%--<bp:DateTimePicker SelectedDateTime="{value: SelectedDate}"
ShowInline />
<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>--%>
using System;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DateTimePicker.sample4
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime SelectedDate { get; set; } = DateTime.Now;
}
}
Sample 5: Custom Icons
To customize the look of icons in the control, you can use the following inner elements:
ToggleIcon
allows to customize the toggle icon. The default value isCalendar
.UnselectIcon
allows to customize the unselect icon. The default value isClose
.PrevDateIcon
allows to customize the icon displayed on the button navigating to previous page of date picker. The default value isChevronLeft
.NextDateIcon
allows to customize the icon displayed on the button navigating to next page of date picker. The default value isChevronRight
.PrevTimeIcon
allows to customize the icon displayed on the button navigating to previous page of time picker. The default value isChevronUp
.NextTimeIcon
allows to customize the icon displayed on the button navigating to next page of time picker. The default value isChevronDown
.
See the Icon documentation to find about using other icon packs.
<bp:DateTimePicker SelectedDateTime="{value: SelectedDate}">
<ToggleIcon>
<bp:Icon Icon="Calendar"></bp:Icon>
</ToggleIcon>
<UnselectIcon>
<bp:Icon Icon="Close"></bp:Icon>
</UnselectIcon>
<PrevDateIcon>
<bp:Icon Icon="ChevronLeft"></bp:Icon>
</PrevDateIcon>
<NextDateIcon>
<bp:Icon Icon="ChevronRight"></bp:Icon>
</NextDateIcon>
<PrevTimeIcon>
<bp:Icon Icon="ChevronUp"></bp:Icon>
</PrevTimeIcon>
<NextTimeIcon>
<bp:Icon Icon="ChevronDown"></bp:Icon>
</NextTimeIcon>
</bp:DateTimePicker>
<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DateTimePicker.sample5
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime SelectedDate { get; set; } = DateTime.Now;
}
}
Sample 6: Custom Texts
To customize the text displayed in the control, you can use the following properties:
HourText
allows to customize the text displayed above a dial used to select hour. The default value isHour
.MinuteText
allows to customize the text displayed above a dial used to select minute. The default value isMinute
.SecondText
allows to customize the text displayed above a dial used to select second. The default value isSecond
.AmPmDesignatorText
allows to customize the text displayed above a dial used to select AM / PM designator. The default value isAM/PM
.
<bp:DateTimePicker SelectedDateTime="{value: SelectedDate}"
HourText="Hours"
MinuteText="Minutes"
SecondText="Seconds"
AmPmDesignatorText="AM/PM"/>
<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DateTimePicker.sample6
{
public class ViewModel : DotvvmViewModelBase
{
public DateTime SelectedDate { get; set; } = DateTime.Now;
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
AutoFocus | Boolean | Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false. |
attribute
static value
|
False | |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
ClosePopupOnSelectionComplete | Boolean | Gets or sets whether the popup should be hidden when the user completes the selection. |
attribute
static value
bindable
|
True | |
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. |
attribute
static value
bindable
|
null | |
Enabled | Boolean | Gets or sets whether the control is enabled and can be modified. |
attribute
bindable
|
False | |
FormatString | String | Gets or sets the format string that will be used to display the date. |
attribute
static value
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
MaxDate | DateTime? | Gets or sets the highest date that can be selected by user. |
attribute
bindable
|
null | |
MinDate | DateTime? | Gets or sets the lowest date that can be selected by user. |
attribute
bindable
|
null | |
Mode | CalendarViewMode | Gets or sets whether you want the user to pick only date, only time, or both date and time. |
attribute
static value
|
Month | |
Placeholder | String | Gets or sets the text displayed when the SelectedDate is empty. |
attribute
static value
|
null | |
Restrictions | IEnumerable<CalendarRestrictionBase> | Gets or sets days a collection of rules specifying which date time intervals can't be selected. |
attribute
bindable
|
null | |
SelectedDate | DateTime? | Gets or sets the date selected by user. |
attribute
bindable
|
null | |
TabIndex | Int32 | Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order. |
attribute
static value
|
0 | |
UseFormatStringAsPlaceholder | Boolean | Gets or sets whether to use FormatString as a placeholder when placeholder property is not set. It is enabled by default. |
attribute
static value
|
True | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
SelectionCompleted | Command | Gets or sets the command that is called when the user successfully selects or unselects a value. |