Bugs with dates and time picker

[NicolasAvanti]

Hi, We are having a lot of problems with datetime pickers. Especially when changing the hours and minutes. For example one of your component is reinitialized if we do not hit enter and therefore we modify a schedule we click on save and the modification is not taken into account. Could you quickly correct this bug please? Thanks in advance Regards

[stsrki]

Can you provide us with a minimal code to reproduce the issue?

[NicolasAvanti]

<TimePicker DisplayFormat="HH:mm" TimeAs24hr="true" @bind-Time="MyTime"></TimePicker>
<TimeEdit @bind-Time="MyTime"></TimeEdit>
@code{
TimeSpan MyTime { get; set; } = DateTime.Now.TimeOfDay;
}

• TimePicker: we can write anything in TimePicker and it computes the hour (and remove extra char) on blur only, and does not take into account the hour we type in the input
• TimeEdit: cannot set the format (we don't want seconds)

[stsrki]

I'm trying your code and it works as expected.

• When writing time into TimePicker it correctly updates the TimeEdit
• Same thing when writing intoTimeEdit, The TimePicker is updated.

I really don't see any issue here. Regarding the TimeEdit format. Since it is basically a native input type="date" it is fully in control by the browser and the system settings. You can try setting the step attribute could make the seconds go away. But it is not guaranteed.

[NicolasAvanti]

Here is a full sample with a new Blazor server project with Blazorise (“BlazoriseTests” in the primary menu) with some screenshots

And our bugs list:

Bug 1: TimePicker does not keep typed time

• Focus Time Picker
• type in the input and not in the popup any hour you want
• get out of the input, wihtout pressing Enter => the entered time is overrided

Bug 2: TimeEdit can't be formatted: seconds always show up, setting Step=0 effectively hide seconds but typing a time is buggy

• Focus TimeEdit with step = 0
• type a >10 hour in the input, like 19 => the entered hour is replaced with 09 instead of 19 (the one without Step = 0 is ok but with seconds)

see example c: https://agoramail.blob.core.windows.net/1files/NewBlazorServer.zip

[NicolasAvanti]

Were you able to reproduce the malfunction?

[NicolasAvanti]

In our exemple :

<TimePicker DisplayFormat="HH:mm" TimeAs24hr="true" @bind-Time="MyTime"></TimePicker>
<TimeEdit @bind-Time="MyTime"></TimeEdit>
@code{
TimeSpan MyTime { get; set; } = DateTime.Now.TimeOfDay;
}

When you change time in TimePicker, time is reinit at lostfocus. Are you sure you can't reproduce it?

[NicolasAvanti]

[stsrki]

Hi, sorry for not getting to you sooner. Yes, I was able to reproduce. What I was missing is that I needed to lose focus by clicking outside of the input. Not by the tab or enter key.

As it looks like, it seems that the problem might be in how the flatpickr library is working. But I will need to investigate more to confirm.

[soenneker]

I'm also seeing this issue too. The problem seems to be that the input in Blazorise stays selected, but the input from the flatpickr doesn't allow focus on the input... it forces focus to the picker.

[oaldrian]

I just want to "vote" for this issue. Just had to explain to a confused user that he has to manually loose focus / hit enter before hitting save on a modal...

[stsrki]

Can you guys check this again? I believe the issue is already fixed with #4795. I have tested it and it seems to be working.

[oaldrian]

it can be reproduced on https://bootstrapdemo.blazorise.com/tests/pickers

• load page
• on the right side click the TimeOnly field
• enter time via keyboard
• click somewhere else
• the time gets taken over
• click the field again
• enter a new time via keyboard
• click somewhere else
• time is reset to old value

[stsrki]

it can be reproduced on https://bootstrapdemo.blazorise.com/tests/pickers

• load page
• on the right side click the TimeOnly field
• enter time via keyboard
• click somewhere else
• the time gets taken over
• click the field again
• enter a new time via keyboard
• click somewhere else
• time is reset to old value

The demo app was for an older version. I have uploaded the latest version app now. Can you try again?

[oaldrian]

ah, now it seems to work. which means I have to update to the latest version in my project too. Thanks! from my pov this could be closed, but I am not the initial reporter.