DateTimePicker - Few Questions

Question

Hi,Few questions, is there an option or way for the DateTimePicker to:1) Use hours 1-24 instead of 0-23? I ask because my use case for this is time being tracked to the whole hour, rounded up. In this case, 1/1/2001 hour 24 would be 1/2/2001 hour 0.2) Have functionality like Today, but also change the time to the current time in the same button?3) Have the date and times be changeable in one dropdown similar to the EJ1 implementation?Thanks in advance!

Deepak Ramakrishnan · Accepted Answer

Hi Cullen, 
 
Greetings from Syncfusion support. 
 
Query 1 : Use hours 1-24 instead of 0-23? I ask because my use case for this is time being tracked to the whole hour, rounded up. In this case, 1/1/2001 hour 24 would be 1/2/2001 hour 0. 
 
We are currently checking the feasibility in our end . We will update the details in two business days(13th,December 2021). 
 
Query 2 : Have functionality like Today, but also change the time to the current time in the same button? 
 
We have created sample for your reference . We can achieve your requirement by binding click event for the button open event of the datetimepicker . 
 




let dateTimeInstance: DateTimePicker = new DateTimePicker({ 
       open(args){ 
          if(args.popup.element.id != 'datetimepicker_timepopup'){ 
         var btn = args.popup.element.getElementsByClassName('e-btn')[0]; 
         btn.addEventListener('click',function(){ 
            dateTimeInstance.value = new Date(); 
         }) 
      } 
      } 
    }); 
    dateTimeInstance.appendTo('#datetimepicker'); 
 
 
Sample Link : https://stackblitz.com/edit/65rqay  
 
 
Query 3 : Have the date and times be changeable in one dropdown similar to the EJ1 implementation? 
 
We have already considered the above requirement as a feature request in our end and this will be available in any of our upcoming future releases. we will consider the feature and implement in the certain release 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/6940/need-to-provide-single-icon-support-to-select-date-and-time-in-datetimepicker  
 
 
Thanks, 
Deepak R.

Cullen Chow · Answer

Great, thanks for your response!

Deepak Ramakrishnan · Answer

You are welcome, Cullen. We will update the details as promised earlier .

Cullen Chow · Answer

Deepak,Thanks again for your suggestion. However, after making the change you suggested for my Query 2, the new Today button only works only when the selected day is not today. For example, if the value is of the same day but the hour is different, the Today button click event is never called.

Deepak Ramakrishnan · Answer

Hi Cullen, 
 
Sorry for the inconvenience caused. 
 
Yes we can able to reproduce the issue in our end . We are currently validating the issue , We will update the details in two business days(16th,December 2021). 
 
 
Thanks, 
Deepak R.

Deepak Ramakrishnan · Answer

Hi Cullen, 
 
Thanks for your patience. 
 
 
Now we have modified the sample by binding mouse down event and it will work as expected (It will set current time even though if the selection is today’s date .).Kindly refer the below attached sample for more details . 
 
Sample Link : https://stackblitz.com/edit/65rqay-p1ykhk  
 
Query 1 :  Use hours 1-24 instead of 0-23? I ask because my use case for this is time being tracked to the whole hour, rounded up. In this case, 1/1/2001 hour 24 would be 1/2/2001 hour 0. 
 
 
On further validating the requirement we have found that our time picker component work based on the Date Object standard including item creation for the popup. You can refer the below screenshot for reference 
 




  
 
 
So if you need to process when the time value is zero , you can use change event to do the required  things as like below code . It will get triggered when the value get changed. 
 




let dateTimeInstance: DateTimePicker = new DateTimePicker({ 
 
            timeFormat: 'HH:mm', 
            change(args) { 
                debugger; 
                console.log(args) 
                if (args.value.getHours() == 0) { 
                    //You can do the required process here  
                } 
            }, 
            open(args) { 
 
                if ( 
                    args.popup.element.querySelector( 
                        '.e-datepicker.e-popup-wrapper .e-today.e-btn' 
                    ) 
                ) { 
                    args.popup.element 
                        .querySelector('.e-datepicker.e-popup-wrapper .e-today.e-btn') 
                        .addEventListener('mousedown', (e) => { 
                            setTimeout(() => { 
                                dateTimeInstance.value = new Date(); 
                            }, 100) 
 
                        }); 
                } 
            }, 
        }); 
        dateTimeInstance.appendTo('#datetimepicker'); 
 
 
Sample Link : https://stackblitz.com/edit/65rqay-vmmnwd  
 
 
Thanks, 
Deepak R.