We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Typing in the time value


I use EjTimePicker with timeFormat="HH:mm".
Is it possible to set the value of ejTimePicker by typing in hour and minute? I can choose a value from the list in popup window (00:00, 00:30, 01:00, 01:30, ...), but I can't just enter the value with keyboard (for example 01:22). I know that I can use the arrow keys if I want to set it to a value that is not shown in the popup, but that is not practical.

I have the same problem with EjDateTimePicker control.

4 Replies

DL Deepa Loganathan Syncfusion Team April 2, 2019 07:20 AM UTC

Hi Petra,  

Thanks for contacting us.  

We understood your concerns regarding usability of EJ1 Timepicker control.  We would like to let you know that you can directly edit the value of Hour, minutes and seconds of Timepicker and DateTimepicker with keyboard input.  

Please check out the behavior of Timepicker in our below demo page.  

If you were still facing any difficulties, kindly get back to us with the below details. 

1.       Are you using Timepicker in Grid control? If yes, please share us the code you used to render Grid and Timepicker in your application.   
2.       Are you facing any console errors while trying to set the value of Timepicker? If yes, please share us the snapshot of the console error 
3.       Version of EJ library used in your application 

The details you provide would further help us isolate the root cause of the issue and provide you a quick solution as soon as possible.  

Deepa L. 

PV Petra Visic April 2, 2019 09:16 AM UTC

1. No.
2. No.
3. "syncfusion-ej-global-all": "16.4.52",
    "syncfusion-javascript": "16.4.52"

And here are relevant parts of code:

<input id="TimeFrom" data-role="ejmtimepicker" data-ej-hourformat="twentyfour" data-ej-focusin="focus" />

        showRoundedCorner: true,
        watermarkText: "",
        timeFormat: "HH:mm",
        locale: "hr-HR"

AB Ashokkumar Balasubramanian Syncfusion Team April 3, 2019 11:41 AM UTC

Hi Petra, 
Thank for providing the code blocks and other version related details. 
Our further analysis of your provided code blocks, we suspect that you have used our TimePicker web component in your application. For this case, we were able to edit the values in TimePicker, but unfortunately the edited functionalities (edited values are not maintained) are not working properly. We have confirmed this as a bug at our end. We will fix this issue and include the fix in our upcoming weekly patch release which will be rolled out by 10th April 2019. 
You can track the status of this through our feedback portal 
Our suggestion for your code block. 
There is no need to add the data-role, data-ej-hourformat, data-ej-focusin attributes in input tag.    
<input id="TimeFrom" data-role="ejmtimepicker" data-ej-hourformat="twentyfour" data-ej-focusin="focus" /> 
If specify data-role="ejmtimepicker" s, it will consider as a mobile component. You just specify input tag and set the properties in. 
<input type="text" id="TimeFrom" /> 
$('# TimeFrom).ejTimePicker({ 
              showRoundedCorner: true, 
              watermarkText: "", 
              timeFormat: "HH:mm", 
              focusIn: function (args) { 
                         //focus event for TimePicker 
Help Document: 
Please let us know, if the provided information’s are helpful or not. 
Ashokkumar B.  

VK Vinoth Kumar Sundara Moorthy Syncfusion Team April 10, 2019 01:02 PM UTC

Hi Petra, 
Thank you for your patience. 
We have fixed the reported issue in TimePicker and the patch for this fix can be downloaded from the following location. 
Recommended approach - exe will perform automatic configuration 
Please find the patch setup from below location: 
Advanced approach – use only if you have specific needs and can directly replace existing assets for your build environment 
Please find the patch assets alone from below location: 
Assembly Version: 
Installation Direction
This patch should replace the file ‘ej.web.all.min.js’ and CSS ‘bootstrap-theme’ under the following folder. You should replace these files manually in your project. 
$system drive:\ Files\Syncfusion\Essential Studio\$Version #\JavaScript\assets 
Eg : C:\Program Files\Syncfusion\Essential Studio\\JavaScript\assets 
To change how you receive bug fixes, ask your license management portal admin to change your project’s patch delivery mode. 
Please note that we have created this patch for version specifically to resolve the following issue reported in this incident. (143688
If you have received other patches for the same version for other products, please apply all patches in the order received. 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon