Edit on Github

DateTimePicker

in namespace DotVVM.BusinessPack.Controls

Renders a date and time picker controls allowing users to select date and time.

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 and EndDate properties, where the StartDate represents inclusive start of the restriction and EndDate represents exclusive end of the restriction.
  • TimeRangeRestriction - Allows to disable selection of a specific time range. You just need to set the StartTime and EndTime properties, where the StartTime represents inclusive start of the restriction and EndTime 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>()
        {
            //These 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="true" />

<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 is Calendar.

  • UnselectIcon allows to customize the unselect icon. The default value is Close.

  • PrevDateIcon allows to customize the icon displayed on the button navigating to previous page of date picker. The default value is ChevronLeft.

  • NextDateIcon allows to customize the icon displayed on the button navigating to next page of date picker. The default value is ChevronRight.

  • PrevTimeIcon allows to customize the icon displayed on the button navigating to previous page of time picker. The default value is ChevronUp.

  • NextTimeIcon allows to customize the icon displayed on the button navigating to next page of time picker. The default value is ChevronDown.

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 is Hour.

  • MinuteText allows to customize the text displayed above a dial used to select minute. The default value is Minute.

  • SecondText allows to customize the text displayed above a dial used to select second. The default value is Second.

  • AmPmDesignatorText allows to customize the text displayed above a dial used to select AM / PM designator. The default value is AM/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
property icon AllowUnselect Boolean Gets or sets whether the selected value can be unselected. It is allowed by default.
attribute
inner element
static value
bindable
default
 True
property icon AmPmDesignatorText String Gets or sets the text displayed above a dial used to select AM / PM designator. The default value is "AM/PM".
attribute
inner element
static value
bindable
default
 AM/PM
property icon 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
inner element
static value
bindable
default
 False
property icon ConfirmIcon IconBase Gets or sets the icon to confirm selection and close popup dialog.
attribute
inner element
static value
bindable
default
 null
property icon Enabled Boolean Gets or sets whether the control is enabled and can be modified.
attribute
inner element
static value
bindable
default
 True
property icon FirstDayOfWeek DayOfWeek? Gets or sets the first day of a week. Set the value to Monday if you want to display ISO 8601 weeks. The default value is based on the current culture.
attribute
inner element
static value
bindable
default
 null
property icon FormatString String Gets or sets the format string that will be used to display the value.
attribute
inner element
static value
bindable
default
 null
property icon HourText String Gets or sets the text displayed above a dial used to select hour. The default value is "Hour".
attribute
inner element
static value
bindable
default
 Hour
property icon MaxDateTime DateTime? Gets or sets the highest date and time that can be selected by user.
attribute
inner element
static value
bindable
default
 null
property icon MinDateTime DateTime? Gets or sets the lowest date and time that can be selected by user.
attribute
inner element
static value
bindable
default
 null
property icon MinuteText String Gets or sets the text displayed above a dial used to select minute. The default value is "Minute".
attribute
inner element
static value
bindable
default
 Minute
property icon NextDateIcon IconBase Gets or sets the icon displayed on the button navigating to next page of date picker.
attribute
inner element
static value
bindable
default
 null
property icon NextTimeIcon IconBase Gets or sets the icon displayed on the button navigating to next page of time picker.
attribute
inner element
static value
bindable
default
 null
property icon Placeholder String Gets or sets the text displayed when value is not selected.
attribute
inner element
static value
bindable
default
 null
property icon PrevDateIcon IconBase Gets or sets the icon displayed on the button navigating to previous page of date picker.
attribute
inner element
static value
bindable
default
 null
property icon PrevTimeIcon IconBase Gets or sets the icon displayed on the button navigating to previous page of time picker.
attribute
inner element
static value
bindable
default
 null
property icon Restrictions IEnumerable<DateTimeRestriction> Gets or sets a collection of rules specifying which date and time intervals can't be selected.
attribute
inner element
static value
bindable
default
 null
property icon SecondText String Gets or sets the text displayed above a dial used to select second. The default value is "Second".
attribute
inner element
static value
bindable
default
 Second
property icon SelectedDateTime DateTime? Gets or sets the date and time selected by user.
attribute
inner element
static value
bindable
default
 null
property icon ShowInline Boolean Gets or sets whether the picker is displayed inline in page or as a drop-down editor.
attribute
inner element
static value
bindable
default
 False
property icon 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
inner element
static value
bindable
default
 0
property icon ToggleIcon IconBase Gets or sets the icon displayed on the toggle button.
attribute
inner element
static value
bindable
default
 null
property icon UnselectIcon IconBase Gets or sets the icon displayed on the unselect button.
attribute
inner element
static value
bindable
default
 null
property icon UseFormatStringAsPlaceholder Boolean Gets or sets whether to use the FormatString as a placeholder when placeholder property is not set. It is enabled by default.
attribute
inner element
static value
bindable
default
 True
property icon Visible Boolean
attribute
inner element
static value
bindable
default
 True
property icon WeekNumberMode WeekNumberMode Gets or sets how are week numbers computed and whether to display them. The default value is Disabled.
attribute
inner element
static value
bindable
default
 Disabled

Events

Name Type Description
event icon Changed Command Gets or sets the command triggered when the value is changed.

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization