Blazor Timepicker manual input customization

Hi,

is it possible to customize the manual input of the datepicker before the formatter converts the value. At the moment I have a format of "HH:mm" and every input that is not in this format is dropped.

I would like to be able to input a value in this format but also to leave the ":" or for example only input the hour. My initial plan was to change the text that is input before it is formatted but I couldn't find any event that fires before the validation.

Best Regards

Alexander


3 Replies

SP Sureshkumar P Syncfusion Team May 17, 2022 10:32 AM UTC

You can customize the list element when rendering the list element using onitemrender event in the timepicker component.

To know more about the event. Please refer the documentation: https://blazor.syncfusion.com/documentation/timepicker/events#onitemrender



AS Alexander Schröders May 18, 2022 09:13 AM UTC

Hi Sureshkumar,

I probably did a bad job explaining what I want to do. What I mean is when you enter a date value without using the list. When I just use the Timepicker as a Textbox and enter a value manually I want to deviate from the given format with things like leaving out the  ":" in the format  "HH:mm". 

My initial idea was to do this in an event and convert the user input to the correct format. But I couldn't find an event that triggers after the value is changed. The first thing I tried was the "ValueChange" Event but that seems to only trigger when the list is used to change the value.

Here is what I currently use inside of a SFGrid:

<EditTemplate Context="StartZeitContext">
    <SfTimePicker TValue="DateTime" @bind-Value="@((StartZeitContext as MonteurZeiterfassung).Start)" Step=15 Format="HH:mm" ScrollTo="@(AufViertelstundeRunden((StartZeitContext as MonteurZeiterfassung).Start))">
        <TimePickerEvents TValue="DateTime" ValueChange="@onValueChangeTimepicker"></TimePickerEvents>
    </SfTimePicker>
</EditTemplate>


And here an example of how it looks


When I update the record of the grid I just get the old value that was in the Start field before I made any change. I would like to have the chance to change the input to something valid. 

Best Regards

Alexander



SP Sureshkumar P Syncfusion Team May 19, 2022 01:26 PM UTC

In our current component, we did not have support for accepting multiple formats into the component. we have already considered the ‘Support for Blazor DatePicker/TimePicker/DateTimePicker to accept the date value which is in all applicable formats’ as a feature request on our end and this will be available in any of our upcoming future releases. we will consider the feature and implement it in certain releases based on the customer request count and priority. You can track the status of the feature from the below link.

Feedback link: https://www.syncfusion.com/feedback/30946


Loader.
Up arrow icon