TimePicker

in namespace DotVVM.BusinessPack.Controls

Usage & Scenarios

Renders a text field that allows the user to enter or select time.

Sample 1: Basic Usage

The SelectedTime property represents a Time value with a time selected in the control.

<bp:TimePicker SelectedTime="{value: SelectedTime}" />

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

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TimePicker.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedTime { get; set; } = DateTime.Now;
    }
}

Sample 2: Selection Bounds

You can use the MinTime and MaxTime properties to specify the minimum and maximum values for the selection.

<bp:TimePicker SelectedTime="{value: SelectedTime}"
               MinTime="{value: MinimumTime}"
               MaxTime="{value: MaximumTime}" />

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

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TimePicker.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedTime { get; set; } = DateTime.Now;
        public DateTime MinimumTime { get; set; } = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 
            7, 30, 0);
        public DateTime MaximumTime { get; set; } = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 
            19, 30, 0);
    }
}

Sample 3: Restrictions

If you require more granular control over what dates can be selected, you can use the Restrictions property.

  • 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. Date part of the DateTime values is ignored so any date can be provided.
<bp:TimePicker SelectedTime="{value: SelectedTime}"
               Restrictions="{value: Restrictions}" />

<p>Selected time: <dot:Literal Text="{value: SelectedTime}" FormatString="g" /></p>
using System;
using System.Collections.Generic;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TimePicker.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedTime { get; set; } = DateTime.Now;

        public List<TimeRestriction> Restrictions { get; set; } = new List<TimeRestriction>()
        {
            //This will prevent selection of any time between 11:45:00 to 13:14:59
            new TimeRangeRestriction() {
                StartTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day,
                    11, 45, 0),
                EndTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day,
                    13, 15, 0)
            },
            //This will prevent selection of any time between 16:30:00 to 17:29:59
            new TimeRangeRestriction() {
                StartTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day,
                    16, 30, 0),
                EndTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day,
                    17, 30, 0)
            }
        };
    }
}

Sample 4: Inline

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

<bp:TimePicker SelectedTime="{value: SelectedTime}"
               ShowInline />

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

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TimePicker.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedTime { 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 DesignatorText String
attribute
inner element
static value
bindable
default
AM/PM
property icon Enabled Boolean
attribute
inner element
static value
bindable
default
False
property icon FormatString String
attribute
inner element
static value
bindable
default
null
property icon HourText String
attribute
inner element
static value
bindable
default
Hour
property icon MaxTime DateTime?
attribute
inner element
static value
bindable
default
null
property icon MinTime DateTime?
attribute
inner element
static value
bindable
default
null
property icon MinuteText String
attribute
inner element
static value
bindable
default
Minute
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 SecondText String
attribute
inner element
static value
bindable
default
Second
property icon SelectedTime 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

Events

Name Type Description
event icon Changed Command

HTML produced by the control