Scheduler, only allow 30 minute increments in popup text field

2 posts, 0 answers
  1. Sorin
    Sorin avatar
    2 posts
    Member since:
    Apr 2019

    Posted 13 Jan 2020 Link to this post

    Hi, I a have a requirement to only allow users to enter time in 30 segments. Since I have set up my scheduler with 30 minute blocks, when the user adds a slot, it will default to a 30 minute block, however the user may still manually enter in a different time in the textbox. I have set the drop-down from the datetimepicker to only show 30 minute slows, but is it possible to set a mask on the associated textbox? I wasn't able to find an existing solution to this, would a mask be the best choice, and if so, is there an example? Note that simply disabling this text box will not be sufficient. 

    See the highlighted sections in the attached screenshot.




  2. Ivan Danchev
    Ivan Danchev avatar
    2150 posts

    Posted 14 Jan 2020 Link to this post

    Hi Sorin,

    Consider handling the Scheduler's edit event and in its handler setting the Start and End DateTimePickers to readonly:

    function onEdit(e) {
      var start = e.container.find("[name=start][data-role=datetimepicker]");
      var end = e.container.find("[name=end][data-role=datetimepicker]");
      start.attr("readonly", true);
      end.attr("readonly", true);

    Dojo example:

    This will make possible selecting time only through the dropdowns and will ensure the selected time is in 30 min increments.

    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top