Tesserae

DatePicker

Description

The DatePicker is a UI component that allows users to select a date using the native browser date picker widget. As part of the Components group, it is built on top of a moment picker base, providing built-in functionality for formatting dates, handling validations, and configuring browser fallbacks. Use this component when you require users to input dates in your application.

Usage

Instantiate the DatePicker using the static helper method from Tesserae.UI. You can optionally supply a default date value and further configure the component by setting properties such as minimum and maximum selectable dates, step increments, required status, and validations. The provided sample demonstrates how to create several instances of the DatePicker with different settings.

date-picker-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new DatePickerExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class DatePickerExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a basic DatePicker.
            var basicPicker = DatePicker();

            // Create a DatePicker with the default date set to two days in the future.
            var futurePicker = DatePicker(DateTime.Now.AddDays(2));

            // Enable graceful degradation in older browsers.
            basicPicker.WithBrowserFallback();

            return Stack().Children(basicPicker, futurePicker).Render();
        }
    }
}

Methods

WithBrowserFallback()
• Returns: DatePicker
• Description: Adds a pattern attribute (yyyy-MM-dd) to the underlying input element for graceful degradation when retrieving the user-selected value on older browsers.

Properties

Date (DateTime)
• Description: Retrieves the current date value selected in the DatePicker component.

Samples

Comprehensive DatePicker Usage

This sample illustrates various ways of configuring the DatePicker component including setting default values, step increments, minimum and maximum constraints, disabled state, required status, error messages, and custom validations.

date-picker-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new DatePickerSampleUsage();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class DatePickerSampleUsage : IComponent
    {
        public HTMLElement Render()
        {
            var from = DateTime.Now.AddDays(-7);
            var to   = DateTime.Now.AddDays(7);

            return Stack().Children(
                // Standard DatePicker.
                Label("Standard").SetContent(DatePicker()),

                // DatePicker with default day set two days in the future.
                Label("With default day of two days in the future").SetContent(DatePicker(DateTime.Now.AddDays(2))),

                // DatePicker with a step increment of 10.
                Label("With step increment of 10").SetContent(DatePicker().SetStep(10)),

                // DatePicker with a maximum date constraint.
                Label($"With max of {to.ToString("D")}").SetContent(DatePicker().SetMax(to)),

                // DatePicker with a minimum date constraint.
                Label($"With min of {from.ToString("D")}").SetContent(DatePicker().SetMin(from)),

                // Disabled DatePicker.
                Label("Disabled").Disabled().SetContent(DatePicker().Disabled()),

                // Required DatePicker.
                Label("Required").Required().SetContent(DatePicker().Required()),

                // DatePicker with an error message to indicate an invalid input.
                Label("With error message").SetContent(DatePicker().Error("Error message").IsInvalid()),

                // DatePicker with custom validation: must be set to a date less than 2 months in the future.
                Label("With validation").SetContent(
                    DatePicker().Validation(datePicker =>
                        datePicker.Date <= DateTime.Now.AddMonths(2)
                            ? null
                            : "Please choose a date less than 2 months in the future")),

                // DatePicker with built-in validation to ensure the date is not in the future.
                Label("With validation on type - not in the future").SetContent(DatePicker().Validation(Validation.NotInTheFuture)),

                // DatePicker with built-in validation to ensure the date is not in the past.
                Label("With validation on type - not in the past").SetContent(DatePicker().Validation(Validation.NotInThePast)),

                // DatePicker with validation ensuring the date is between specified range.
                Label($"With validation on type - between {from.ToString("D")} and {to.ToString("D")}").SetContent(
                    DatePicker().Validation(datePicker => Validation.BetweenRange(datePicker, from, to)))
            ).Render();
        }
    }
}