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.js

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.

Constructors

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

Property

DateTimePicker.DateTime

public DateTime DateTime

Gets or sets the date time.

Methods

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.js

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

DateTimePicker

Constructors

DateTimePicker

Properties

DateTimePicker.DateTime

Methods

DateTimePicker.WithBrowserFallback

Returns

Samples

DateTimePicker Variants

See also

Referenced by