DateTimePicker

6 posts, 0 answers
  1. Vasil
    Vasil avatar
    3 posts
    Member since:
    Jul 2020

    Posted 07 Jul 2020 Link to this post

    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 !


     

     

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 07 Jul 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Vasil
    Vasil avatar
    3 posts
    Member since:
    Jul 2020

    Posted 07 Jul 2020 in reply to Stefan Link to this post

    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 !

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 08 Jul 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Vasil
    Vasil avatar
    3 posts
    Member since:
    Jul 2020

    Posted 16 Jul 2020 in reply to Stefan Link to this post

    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

  6. Kiril
    Admin
    Kiril avatar
    24 posts

    Posted 20 Jul 2020 Link to this post

    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

Back to Top