Tesserae

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);
        }
    }
}

Methods

WithBrowserFallback()
- Description: Adds a pattern attribute to the underlying input element. This helps gracefully degrade the user experience on older browsers by ensuring that the user selected value is still retrieved correctly.
- Returns: DateTimePicker (the current instance), allowing further chaining.

Properties

DateTime
- Type: DateTime
- Description: Gets the current date and time value from the picker. This value is derived from the internal Moment value maintained by the component.

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);
        }
    }
}