Hello,
I'm trying to use DateTimePicker like this:
<DateTimePicker
show={show}
onChange={this.onDatepickerChange}
// cancelButton={false}
popupSettings={{
appendTo: this.renderRef,
animate: false,
}}
/>
<Button onClick={this.toggleCalendar} />
<div id="render" ref={(render) => { this.renderRef = render; }} />
1. I don't have control on "Cancel" button. When I set show prop and try to toggle the calendar with custom button, the "Cancel" button doesn't work. I can only hide it.
2. Then I tried to set DateTimePicker popup to Not render in the "body", but it doesn't work. Every popupSettings is ignored. I tried this in kendo react Popup component and the prop "appendTo" worked as expected.
Thanks in advance for the help !
5 Answers, 1 is accepted
Hello, Vasil,
Regarding both questions/issues:
1) The event that is fired when the cancel button is clicked is onBlur. Still, as this event is fired in many other cases, we can check inside the event if it was triggered by the cancel button and close the DateTimePicker:
https://stackblitz.com/edit/react-vtzmkt?file=app/main.jsx
https://www.telerik.com/kendo-react-ui/components/dateinputs/api/DateTimePickerProps/#toc-onblur
2) This is because the DateTimePicker has no popupSettings prop:
https://www.telerik.com/kendo-react-ui/components/dateinputs/api/DateTimePickerProps/
We are planning a large update of the DateTimePicker this quarter and this could be one of the new properties.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Thanks :). The first one worked with one additional check.
One last question.
Is it possible to open DateTimePicker with custom button on the tab with "Time".
Thanks again, for the quick response !
Hello, Vasil,
Currently, the DateTimePicker can be opended only on the date part as this is required for selecting the complete date.
Still, if there is a special use case, a ref of the component can be used with private property, but it is not recommended and has to be used with caution:
https://stackblitz.com/edit/react-tlbdh5?file=app/main.jsx
Also, we can suggest making an official feature request that will provide a property to set it out of the box. This is how we determine which will be the next components and features to be implemented base on the community interest:
https://feedback.telerik.com/kendo-react-ui
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Hello, Stefan
First thanks for the support. I made the DP to open with custom buttons , managed to hide input format by using another input to renter what i want , and hide the DP input.
But now i faced the problem when i click outside of the DateTimePicker it doesn't close.
On the demo in the doc in hides when you click out of the input or the datepicker popup
Is there some prop for that or ?
BR,
Vasil
Hi Vasil,
When the `show` property is set to the `DateTimePicker`, the developer is in full control of the internal `show` state and we do not override the provided `show` value.
I have prepared the following stackblitz example which demonstrates how to close the Popup on `blur` when the `show` value is in controlled state:
https://stackblitz.com/edit/react-kypmsd
Please let me know if you need further assistance.
Regards,
Kiril
Progress Telerik