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.
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,
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,
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,
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,
|
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'));
|
