Tesserae - Date Picker

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

API reference

class

DatePicker

public class DatePicker : MomentPickerBase<DatePicker, DateTime>

A form input for picking a single calendar date, backed by the browser's native date input.

Constructors

Constructor

DatePicker

public DatePicker(DateTime? date = null) : base("date", date.HasValue ? FormatDateTime(date.Value) : string.Empty)

Initializes a new instance of this class.

Properties

Property

DatePicker.Date

public DateTime Date

Gets or sets the date value of the component.

Methods

Method

DatePicker.WithBrowserFallback

public DatePicker 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

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

DatePicker

Description

Usage

API reference

DatePicker

Constructors

DatePicker

Properties

DatePicker.Date

Methods

DatePicker.WithBrowserFallback

Returns

Samples

Comprehensive DatePicker Usage

See also

Referenced by