A component for FluentDatePicker and FluentTimePicker

[true-perfect-code]

I have not seen a component that contains both the date and the time, but two independent components are provided: FluentDatePicker and FluentTimePicker.

This brings a few challenges when using it, because the time is usually bound to the date and if you use two properties here (e.g. date and time), a date is also automatically stored in the time property that does not necessarily correspond to the selected date.

You are not even aware of this behavior in your examples because you only output the time without the date. In this example I have selected the date of 10-01, the date of the time component has not changed of course, because the current date was set there during initialization and that is 11-01 today.

It would be nice to have a component for date and time selection that only has one binding variable (will probably be of type DateTime?). This would make handling the component and managing the model (property) in the program code much easier. Currently, you either have to implement two separate properties (date and time), or just one, but then merge these two binding variables into one property.

Thanks
pc

[hml-coder]

Maybe create a composite component like this:

@* MyDateTimePicker *@
<FluentStack>
    <FluentDatePicker @bind-Value="SelectedDate" />
    <FluentTimePicker @bind-Value="SelectedTime" />
</FluentStack>

@code {
    [Parameter] public DateTime? Value { get; set; }
    [Parameter] public EventCallback<DateTime?> ValueChanged { get; set; }
    [Parameter] public EventCallback<TimeSpan?> TimeChanged { get; set; }

    private DateTime? SelectedDate
    {
        get => Value?.Date;
        set => UpdateValue(value, SelectedTime?.TimeOfDay);
    }

    private DateTime? SelectedTime
    {
        get => Value;
        set
        {
            if (Value?.TimeOfDay != value?.TimeOfDay)
            {
                UpdateValue(SelectedDate, value?.TimeOfDay);
                TimeChanged.InvokeAsync(value?.TimeOfDay);
            }
        }
    }

    private void UpdateValue(DateTime? date, TimeSpan? time)
    {
        var newValue = date?.Add(time ?? TimeSpan.Zero);
        if (newValue != Value)
        {
            Value = newValue;
            ValueChanged.InvokeAsync(Value);
        }
    }
}

And use it like this:

<MyDateTimePicker @bind-Value="DateTimeValue"
                  TimeChanged="@(time => SelectedTime = time)" />

<p>Selected DateTime: @DateTimeValue?.ToString("yyyy-MM-dd hh:mm tt")</p>
<p>Selected Time: @(SelectedTime.HasValue ? DateTime.Today.Add(SelectedTime.Value).ToString("hh:mm tt") : "--:--")</p>

@code {
    private DateTime? DateTimeValue { get; set; } = DateTime.Now;
    private TimeSpan? SelectedTime { get; set; } = DateTime.Now.TimeOfDay;
}

[true-perfect-code]

Hi @hml-coder

Thanks for the suggestion. I have also implemented it this way, but my suggestion would be to create a component with both selection options (date + time) that only has one binding variable. This would make our work a little easier, because we wouldn't have to manage two binding variables but only one.

Regards
pc

[hml-coder]

Hi pc - Since the FluentDatePicker only updates the date portion of a DateTime and the FluentTimePicker updates only the time portion, I would be tempted to bind both to the same parameter within the composite component thinking there shouldn't be any conflicts such as race conditions.

Disclaimer: I’m also a user of the Fluent components so some of this is guesswork.

This worked for me.

@* MyDateTimePicker *@

<FluentStack>
    <FluentDatePicker Value="Value" ValueChanged="OnValueChanged" />
    <FluentTimePicker Value="Value" ValueChanged="OnValueChanged" />
</FluentStack>

@code {
    [Parameter] public DateTime? Value { get; set; }
    [Parameter] public EventCallback<DateTime?> ValueChanged { get; set; }

    private async Task OnValueChanged(DateTime? newValue)
    {
        if (newValue != Value)
        {
            Value = newValue;
            await ValueChanged.InvokeAsync(Value);
        }
    }
}

Example:

<MyDateTimePicker @bind-Value="DateTimeValue"/>

<p>Selected DateTime: @DateTimeValue?.ToString("yyyy-MM-dd hh:mm tt")</p>

@code {
    private DateTime? DateTimeValue { get; set; } = DateTime.Now;
}

[true-perfect-code]

Hi @hml-coder

That is an interesting idea. Thanks for the tip.

Regards
pc