Tesserae - Date Time Picker

DateTimePicker

Description

The DateTimePicker component provides a native browser widget for selecting date and time values. It is designed for situations where precise date-time input is required and leverages the browser's built-in capabilities. Under the hood, it converts the provided or selected DateTime value to a string format ("yyyy-MM-ddTHH:mm") for proper display and parsing. Use this component when you need to allow users to pick both date and time with built-in validation and customizable constraints. It is part of the Components group in the Tesserae UI library.

Usage

Instantiate a DateTimePicker using the fluent interface via the static helper method in Tesserae.UI. You can provide an initial DateTime value to set a default value, or use various chainable methods to set additional properties like step increment, minimum or maximum dates, or browser fallback behavior.

Below is an example that creates a basic DateTimePicker:

date-time-picker-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var picker = DateTimePicker();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(picker);
        }
    }
}

API reference

class

DateTimePicker

public class DateTimePicker : MomentPickerBase<DateTimePicker, DateTime>

A form input for picking a single date together with a time-of-day.

Namespace: Tesserae
Inheritance: MomentPickerBase<DateTimePicker, DateTime> → DateTimePicker

Constructors

Name	Description
DateTimePicker	Initializes a new instance of this class.

Constructor

DateTimePicker

public DateTimePicker(DateTime? dateTime = null) : base("datetime-local", dateTime.HasValue ? FormatDateTime(dateTime.Value) : string.Empty)

Initializes a new instance of this class.

Properties

Name	Description
DateTime	Gets or sets the date time.

Property

DateTimePicker.DateTime

public DateTime DateTime

Gets or sets the date time.

Methods

Name	Description
WithBrowserFallback	Adds the pattern attribute to the underlying input element for graceful degradation when retrieving the user selected value on older browsers.

Method

DateTimePicker.WithBrowserFallback

public DateTimePicker WithBrowserFallback()

Adds the pattern attribute to the underlying input element for graceful degradation when retrieving the user selected value on older browsers.

Returns

The current instance of the type.

Samples

DateTimePicker Variants

This sample illustrates the creation of a DateTimePicker with a few configurations like a default future date, step increment, and range limits.

date-time-picker-2-sample.cs

using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var from = DateTime.Now.AddDays(-7);
            var to = DateTime.Now.AddDays(7);

            var component = Stack().Width(40.percent()).Children(
                Label("Standard").SetContent(DateTimePicker()),
                Label("With default day of two days in the future").SetContent(DateTimePicker(DateTime.Now.AddDays(2))),
                Label("With step increment of 10").SetContent(DateTimePicker().SetStep(10)),
                Label($"With max of {to.ToShortDateString()}").SetContent(DateTimePicker().SetMax(to)),
                Label($"With min of {from.ToShortDateString()}").SetContent(DateTimePicker().SetMin(from)),
                Label("Disabled").Disabled().SetContent(DateTimePicker().Disabled()),
                Label("Required").Required().SetContent(DateTimePicker()),
                Label("With error message").SetContent(DateTimePicker().Error("Error message").IsInvalid()),
                Label("With validation").SetContent(
                    DateTimePicker().Validation(dtPicker =>
                        dtPicker.DateTime <= DateTime.Now.AddMonths(2) ? null : "Please choose a date less than 2 months in the future")),
                Label("With browser fallback").SetContent(
                    DateTimePicker().WithBrowserFallback())
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

DateTimePicker

Description

Usage

API reference

Constructors

DateTimePicker

Properties

DateTimePicker.DateTime

Methods

DateTimePicker.WithBrowserFallback

Returns

Samples

DateTimePicker Variants

See also