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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

open the datepiker at the click on input

Thread ID:

Created:

Updated:

Platform:

Replies:

143352 Mar 15,2019 10:12 AM UTC Apr 23,2019 01:24 PM UTC React - EJ 2 7
loading
Tags: DatePicker
TOKO FIDELE
Asked On March 15, 2019 10:12 AM UTC


Hello

I use the date picker component, I would like to forbid the entry of the user in the field and allow the opening of the popup of the date selector only by clicking on the field or on the icon

 

Thanks in advance and regards,   

Deepa Loganathan [Syncfusion]
Replied On March 15, 2019 12:38 PM UTC

Hi Toko Fidele,  


Greetings from Syncfusion support.  


Your requirement to restrict the user from typing Date input can be achieved by setting the allowEdit API of Datepicker to false.  


<div className='control-section'> 
                    <div className='datepicker-control-section'> 
                        <DatePickerComponent value={this.dateValue} allowEdit={false}></DatePickerComponent> 
                    </div> 
                </div> 


Please check the below help pages to explore more about the configuration options available in Datepicker.  






Regards, 
  
Deepa L. 


TOKO FIDELE
Replied On March 16, 2019 08:01 AM UTC


Hello Deepa Loganathan, thank you for your prompt answer, however I wish to open the popup of

date selector focus on the field.

 

Thanks in advance and regards,  



Deepa Loganathan [Syncfusion]
Replied On March 18, 2019 05:05 AM UTC

Hi Toko Fidele,   
 
 
Thanks for the update.  
 
 
You can achieve this requirement to show popup upon focusing input element by using the show method of Datepicker in its focus event as given below. 
 
 
 
<DatePickerComponent value={this.dateValue} allowEdit={false}   
focus={this.onFocusIn.bind(this)} ref={date => this.dateObj = date}></DatePickerComponent> 
 
 
onFocusIn(){ 
      this.dateObj.show() 
    } 
 
 
 
 
Please find the sample for your reference.  
 
 
 
 
Regards, 
  
Deepa L. 


TOKO FIDELE
Replied On March 18, 2019 03:20 PM UTC

Hello Deepa Loganathan, I hope you have a great day.

Thank you very much, we almost touch the solution to my problem, however when I open the popup of date

selector focus on the field, to re-open it to the next focus on the field, I have to do two clicks (first to close the popup and the second I do not know why) outside the popup before the next focus m 'opens the popup.

I would like that the blur, the popup is closed and the focus it opens.

Thanks in advance and regards,


Deepa Loganathan [Syncfusion]
Replied On March 19, 2019 01:16 PM UTC

Hey Toko,  
 
Good Day! 
 
Yes, the reported one (Datepicker retains focus upon document click) is an issue in Datepicker and we have logged it in our database to fix the issue. This fix will be included in the patch release tentatively scheduled for rollout in the first week of April.  
 
You can track the status of this fix in the below link. 
 
 
Regards,  
 
Deepa L. 


TOKO FIDELE
Replied On April 22, 2019 12:46 PM UTC

I hope you have a great day.

Thank you very much, we almost touch the solution to my problem, however when I open the popup of date

selector focus on the field, to re-open it to the next focus on the field, I have to do two clicks (first to close the popup and the second I do not know why) outside the popup before the next focus m 'opens the popup.

I would like that the blur, the popup is closed and the focus it opens.

Thanks in advance and regards,


Ashokkumar Balasubramanian [Syncfusion]
Replied On April 23, 2019 01:24 PM UTC

Hi Toko, 
 
Sorry for the inconvenience. 
 
We need to ensure the fix for the reported issue with all calendar components. So, we were unable to move the fix on today’s patch release. We have planned to include the fix on our upcoming Vol 1, 2019 service pack release, which is tentatively scheduled for rollout in the mid of May 2019. Please be patience until then. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;