DateField

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="date-field-limits" OnValidSubmit="Save" MaxWidth="20.Rem" Grow>
    <DateField @bind-Value="Model!.CheckIn" Hint="Bookings open for 2027." />
    <DateField @bind-Value="Model!.CheckOut" Min="Model!.CheckIn" />
    <Row><Button Submit>Book</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Booked @saved.In.ToString("MMM d") to @(saved.Out?.ToString("MMM d") ?? "open").</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "date-field-limits")]
    private Booking? Model { get; set; }

    // What was saved, not the fields: on an interactive page they follow typing.
    private (DateOnly In, DateOnly? Out)? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = (Model!.CheckIn!.Value, Model.CheckOut);

    public sealed class Booking
    {
        [Required, Range(typeof(DateOnly), "2027-01-01", "2027-12-31", ErrorMessage = "Pick a date in 2027.")]
        [Display(Name = "Check-in")]
        public DateOnly? CheckIn { get; set; } = new DateOnly(2027, 6, 14);

        [Display(Name = "Check-out")]
        public DateOnly? CheckOut { get; set; }
    }
}

<Form Model="Model" FormName="date-field-time-zones" OnValidSubmit="Save" MaxWidth="22.Rem" Grow>
    <DateField @bind-Value="Model!.Deploy" Label="Deploy at (UTC)" />
    <DateField @bind-Value="Model!.Standup" Label="Standup (New York)" TimeZone="NewYork" />
    <Row><Button Submit>Schedule</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Saved @saved.Deploy.ToString("u") and @saved.Standup.ToString("yyyy-MM-dd HH:mm zzz").</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "date-field-time-zones")]
    private Schedule? Model { get; set; }

    private static readonly TimeZoneInfo NewYork = TimeZoneInfo.FindSystemTimeZoneById("America/New_York");

    private (DateTime Deploy, DateTimeOffset Standup)? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = (Model!.Deploy, Model.Standup);

    public sealed class Schedule
    {
        // A DateTime comes back in UTC; a DateTimeOffset with the zone's offset.
        public DateTime Deploy { get; set; } = new(2027, 3, 1, 22, 0, 0, DateTimeKind.Utc);

        public DateTimeOffset Standup { get; set; } = new(2027, 3, 2, 9, 30, 0, TimeSpan.FromHours(-5));
    }
}

<Form Model="Model" FormName="date-field-periods" OnValidSubmit="Save" MaxWidth="20.Rem" Grow>
    <DateField @bind-Value="Model!.Starts" Type="DateFieldType.Month" Min="@First" Clearable />
    <DateField @bind-Value="Model!.Year" Type="DateFieldType.Year" Label="Model year" Min="2000" Max="2030" />
    <Row><Button Submit>Save</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Starts @(saved.Starts?.ToString("MMMM yyyy") ?? "unset"), model year @(saved.Year?.ToString() ?? "unset").</Alert>
    }
</Form>

@code {
    private static readonly DateOnly First = new(2027, 1, 1);

    [SupplyParameterFromForm(FormName = "date-field-periods")]
    private Plan? Model { get; set; }

    // What was saved, not the fields: on an interactive page they follow what's chosen.
    private (DateOnly? Starts, int? Year)? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = (Model!.Starts, Model.Year);

    public sealed class Plan
    {
        public DateOnly? Starts { get; set; } = new DateOnly(2027, 3, 1);

        public int? Year { get; set; }
    }
}

<Form Model="Model" FormName="date-field-days" OnValidSubmit="Save" MaxWidth="20.Rem" Grow>
    <DateField @bind-Value="Model!.Delivery" Hint="We don't deliver at weekends." DateDisabled="IsWeekend" Min="@First" Max="@Last" Clearable />
    <DateField @bind-Value="Model!.Reminder" UseNative Hint="The browser's calendar." />
    <Row><Button Submit>Save</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Delivery on @saved.ToString("MMM d, yyyy").</Alert>
    }
</Form>

@code {
    private static readonly DateOnly First = new(2027, 3, 1);
    private static readonly DateOnly Last = new(2027, 5, 31);

    [SupplyParameterFromForm(FormName = "date-field-days")]
    private Order? Model { get; set; }

    private DateOnly? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = Model!.Delivery;

    private static bool IsWeekend(DateOnly day) => day.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday;

    public sealed class Order
    {
        public DateOnly? Delivery { get; set; } = new DateOnly(2027, 3, 15);

        public DateOnly? Reminder { get; set; }
    }
}

<Form Model="Model" FormName="date-field-states" MaxWidth="20.Rem" Grow>
    <DateField @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <DateField @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <DateField @bind-Value="Model!.Signed" Label="Signed on" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <DateField @bind-Value="Model!.Renews" Label="Renews on" Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "date-field-states")]
    private Contract? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Contract
    {
        public DateOnly Small { get; set; } = new(2027, 1, 4);
        public DateOnly Large { get; set; } = new(2027, 1, 4);
        public DateOnly Signed { get; set; } = new(2026, 9, 30);
        public DateOnly Renews { get; set; } = new(2027, 9, 30);
    }
}