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

open the datepiker at the click on input


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,   

10 Replies

DL Deepa Loganathan Syncfusion Team 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. 



TF TOKO FIDELE 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,  




DL Deepa Loganathan Syncfusion Team 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. 



TF TOKO FIDELE 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,



DL Deepa Loganathan Syncfusion Team 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. 



TF TOKO FIDELE 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,



AB Ashokkumar Balasubramanian Syncfusion Team 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. 



JL JEAN-MICHEL LAFORGE April 21, 2020 04:05 PM UTC

What if I would just like to completely hide the textbox ? like just the button without the textbox


SP Sureshkumar P Syncfusion Team April 22, 2020 01:04 PM UTC

Hi JEAN, 
 
Thanks for your update.  
 
Yes, we can able to open the popup in one button click. We have created the sample based on your requirement. please find the code example and sample link below.  
 
Code example. 
 
import { render } from 'react-dom'; 
import './index.css'; 
import * as React from 'react'; 
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars'; 
import { SampleBase } from './sample-base'; 
 
export class Default extends SampleBase { 
    constructor() { 
        super(...arguments); 
        this.dateValue = new Date(); 
    } 
     customDates(args) { 
        /*Date Input element hidden*/ 
        this.datepickerInstance.inputWrapper.container.style.display = "none"; 
    } 
    buttonClick(){ 
      /*Date popup element opened using show public methos*/ 
      this.datepickerInstance.show("#target");    
      /*Date popup element styles are overrided based on target element*/   
      this.datepickerInstance.popupWrapper.removeAttribute('style'); 
      this.datepickerInstance.popupWrapper.style.zIndex = "1000"; 
      this.datepickerInstance.popupWrapper.style.position = "absolute"; 
    } 
    onPopupOpen(args){ 
      /*Date popup element appended with specifix target element*/   
      args.appendTo = document.body.querySelector("#target"); 
    } 
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section'> 
                    <div className='datepicker-control-section'> 
                        <DatePickerComponent ref={calendar => this.datepickerInstance = calendar} created={this.customDates.bind(this)} open={this.onPopupOpen.bind(this)}  value={this.dateValue}></DatePickerComponent> 
                        <button id="btn" onClick={this.buttonClick.bind(this)}>clickToOpenDatePicker</button> 
                        <div id="target"></div> 
                    </div> 
                </div> 
            </div>); 
    } 
} 
 
render(<Default />, document.getElementById('sample')); 
 
 
 
please check the above sample and let us know whether it suits your requirement. if not please get revert us with details. 
 
Regards, 
Sureshkumar P 



BC Berly Christopher Syncfusion Team April 20, 2021 07:01 AM UTC

Hi TOKO, 
  
Thanks for the patience.  
  
We are glad to announce that our latest release in the version 17.1.43 has been rolled out successfully and in that release, we have included the “Need to click the document on twice to lost the focus for the DatePicker if the value is not selected.  So, we suggest you upgrade our Syncfusion packages to the mentioned product version or latest version to resolve this issue in your end. 
  
Please find the release notes details from the below link.  
  
Regards, 
Berly B.C 


Loader.
Live Chat Icon For mobile
Up arrow icon