DatePicker

in namespace DotVVM.BusinessPack.Controls

Usage & Scenarios

Renders a text field that allows the user to enter or select date using a Gregorian-style calendar popup.

Sample 1: Basic Usage

The SelectedDate property represents a Date value with a date selected in the control.

<bp:DatePicker SelectedDate="{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.DatePicker.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
    }
}

Sample 2: Selection Bounds

You can use the MinDate and MaxDate properties to specify the minimum and maximum values for the selection.

<bp:DatePicker SelectedDate="{value: SelectedDate}"
               MinDate="{value: MinimumDate}"
               MaxDate="{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.DatePicker.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.

Restrictions can be combined with MinDate and MaxDate properties and are verified both on client-side and server-side.

<bp:DatePicker SelectedDate="{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.DatePicker.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;

        public List<DateRestriction> Restrictions { get; set; } = new List<DateRestriction>()
        {
            //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: Format Strings

The FormatString property specifies the format that will be used to display selected date. Use standard or custom .NET date format strings.

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

<bp:DatePicker SelectedDate="{value: SelectedDate}"
               FormatString="dd MMM yyyy"/>

<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.DatePicker.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
    }
}

Sample 5: Inline

The 'ShowInline' property toggle whether the DatePicker is displayed inline in page or as a drop-down editor.

<bp:DatePicker SelectedDate="{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.DatePicker.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
    }
}

Properties

Name Type Description Notes Default Value
property icon AllowUnselect Boolean
attribute
inner element
static value
bindable
default
True
property icon Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
null
property icon AutoFocus Boolean
attribute
inner element
static value
bindable
default
False
property icon Enabled Boolean
attribute
inner element
static value
bindable
default
False
property icon FirstDayOfWeek DayOfWeek?
attribute
inner element
static value
bindable
default
null
property icon FormatString String
attribute
inner element
static value
bindable
default
null
property icon MaxDate DateTime?
attribute
inner element
static value
bindable
default
null
property icon MinDate DateTime?
attribute
inner element
static value
bindable
default
null
property icon NextIcon IconBase
attribute
inner element
static value
bindable
default
null
property icon Placeholder String
attribute
inner element
static value
bindable
default
null
property icon PrevIcon IconBase
attribute
inner element
static value
bindable
default
null
property icon Restrictions IEnumerable<CalendarRestrictionBase>
attribute
inner element
static value
bindable
default
null
property icon SelectedDate DateTime?
attribute
inner element
static value
bindable
default
null
property icon ShowInline Boolean
attribute
inner element
static value
bindable
default
False
property icon TabIndex Int32
attribute
inner element
static value
bindable
default
0
property icon ToggleIcon IconBase
attribute
inner element
static value
bindable
default
null
property icon UnselectIcon IconBase
attribute
inner element
static value
bindable
default
null
property icon UseFormatStringAsPlaceholder Boolean
attribute
inner element
static value
bindable
default
True
property icon Visible Boolean
attribute
inner element
static value
bindable
default
null
property icon WeekNumberMode WeekNumberMode
attribute
inner element
static value
bindable
default
Disabled

Events

Name Type Description
event icon Changed Command

HTML produced by the control