Version: 2.0 |

TimePicker

in namespace DotVVM.BusinessPack.Controls

Properties

Name Type Description Notes Default Value
AllowUnselect Boolean
attribute
inner element
static value
bindable
default
True
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
AutoFocus Boolean
attribute
inner element
static value
bindable
default
False
DesignatorText String
attribute
inner element
static value
bindable
default
AM/PM
Enabled Boolean
attribute
inner element
static value
bindable
default
False
FormatString String
attribute
inner element
static value
bindable
default
HourText String
attribute
inner element
static value
bindable
default
Hour
MaxTime DateTime?
attribute
inner element
static value
bindable
default
MinTime DateTime?
attribute
inner element
static value
bindable
default
MinuteText String
attribute
inner element
static value
bindable
default
Minute
NextIcon IconBase
attribute
inner element
static value
bindable
default
Placeholder String
attribute
inner element
static value
bindable
default
PrevIcon IconBase
attribute
inner element
static value
bindable
default
SecondText String
attribute
inner element
static value
bindable
default
Second
SelectedTime DateTime?
attribute
inner element
static value
bindable
default
ShowInline Boolean
attribute
inner element
static value
bindable
default
False
TabIndex Int32
attribute
inner element
static value
bindable
default
0
ToggleIcon IconBase
attribute
inner element
static value
bindable
default
UnselectIcon IconBase
attribute
inner element
static value
bindable
default
UseFormatStringAsPlaceholder Boolean
attribute
inner element
static value
bindable
default
True
Visible Boolean
attribute
inner element
static value
bindable
default

Events

Name Type Description
Changed Command

Usage & Scenarios

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

HTML Rendered by the Control

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.
<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>()
        {
            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)
            },
            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;
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message