# 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:

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

var picker = DateTimePicker(); // Creates a basic DateTimePicker without an initial value
document.body.appendChild(picker.Render());

# 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

# Basic DateTimePicker

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

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

var from = DateTime.Now.AddDays(-7);
var to = DateTime.Now.AddDays(7);

var content = SectionStack()
    .Title("DateTimePicker Sample")
    .Section(Stack().Children(
         TextBlock("Overview"),
         TextBlock("The DateTimePicker allows users to pick a datetime from a native browser widget."),
         Link("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local", "Further Information")))
    .Section(Stack().Children(
         TextBlock("Usage"),
         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.appendChild(content.Render());

# See also

DatePicker
TimePicker (if available)