DateTimePicker

Description

This component represents a date and time picker in Blazor using the Gap.Blazor.DateTimePicker model. It integrates with Telerik’s DatePicker and optionally includes a checkbox to enable or disable the date selection. The component supports dynamic formatting and styling based on the model.

Usage

@using Gap.Blazor
@using Gap.Blazor.Components
@using Telerik.Blazor.Components
@inherits WMControlComponentBase
@namespace Gap.Blazor.Components

<WMStyleBase model=@dateTimePicker></WMStyleBase>
<div class="@dateTimePicker.GetStringClasses()">
    @if(dateTimePicker.ShowCheckBox == true)
    {
        <TelerikCheckBox @bind-Value="@dateTimePicker.Checked"></TelerikCheckBox>
    }
    <TelerikDatePicker class="@(!dateTimePicker.Checked ? "k-unchecked" : "" )"
                       @bind-Value="@dateTimePicker.Value" 
                       Format="@convertToTelerikFormat()" 
                       OnChange=@dateTimePickerOnChange 
                       OnOpen="@updateCheckedValue">
    </TelerikDatePicker>
</div>

<style>
    [email protected]() {
        display: inline-flex;
    }
    [email protected]() .k-checkbox-wrap {
        margin-top: 5px;
    }
    [email protected]() .k-input-inner {
        font-size: @dateTimePicker.Font.GetFontSize();
    }
    [email protected]() .k-input-button {
        width: 20px;
    }
    .k-datetimepicker.k-unchecked .k-input-inner {
        pointer-events: none;
        opacity: 0.6;
        filter: grayscale(0.1);
    }
</style>

Properties

• DateTimePicker: Instance of the Gap.Blazor.DateTimePicker model.

• Value: Bound to the selected date/time value.

• Checked: Boolean indicating whether the date picker is enabled (used with ShowCheckBox).

• Format: Determines the display format of the date/time.

Methods

• OnInitialized(): Subscribes to the ValueChanged event to trigger UI updates.

• DateTimePickerOnChange(): Invokes the model’s PerformValueChange() method.

• UpdateCheckedValue(): Automatically sets Checked = true when the calendar is opened.

• ConvertToTelerikFormat(): Converts the model’s format to a Telerik-compatible string:

  • Long → "dddd, MMMM dd, yyyy"

  • Short → "M/d/yyyy"

  • Time → "h:mm tt"

  • Custom → Uses CustomFormat from the model

Dynamic Rendering

The component dynamically renders a date picker with optional checkbox based on the DateTimePicker model:

• WMStyleBase: Applies styles based on the model.

• TelerikCheckBox: Toggles the enabled state of the date picker.

• TelerikDatePicker: Displays the date/time selection UI.

Styles

• Layout: Uses inline-flex for alignment.

• Checkbox: Margins adjusted for visual alignment.

• Input Styling: Font size and button width are model-driven.

• Disabled State: When unchecked, the date picker is visually disabled using opacity and pointer restrictions.

Events

• ValueChanged: Triggered when the selected date/time changes.