This is a migrated thread and some comments may be shown as answers.

Questions using a KendoDateTimePicker in Outsystems

3 Answers 239 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Alvin
Top achievements
Rank 1
Alvin asked on 21 Sep 2020, 05:29 AM
Hi Community,
I am using a KendoDateTimePicker, and would like to have the following function:
1) Disable weekends from the dates  -Picture 1

2) Keep the time within working hours based on what the admin has set up in a specific location.
All locations are operating between 9 am to 6.00 pm (Mon-Friday).

Example for B4: 
Each appointment will be 22 minutes long for B4. (Using admin config page) -Picture 2

Based on the location shown on the new appointment page (User location is B4), the duration for the Appointment time will be adjusted to 22 minutes. (Using new appointment page) -Picture 3

3) Once a time slot is taken up or when the date is full, the user will not be able to select it. 
User will not be able to choose slots which are taken/ or the slots that are taken will not appear in the selection. If the date is full (Not time slots available), the User will not be able to choose the date. -Picture 4

4) To have the Time dropdown open upwards instead of downwards (Similar to the dates dropdown)

Anyone can guide me through on how I can do it?
Thanks in advance. 

3 Answers, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 22 Sep 2020, 07:34 PM

Hello Alvin,

Please take a look at the following which addresses each of your inquiries:

  1. In order to disable dates such as the weekend, set the disableDates array like how it is set in this Kendo UI Live Demo.
  2. Currently, setting the min and max time of the Kendo UI DateTimePicker is not supported out of the box.  However, there is a feature request specific to setting it with a possible approach.  Furthermore, I have added a vote on your behalf requesting for it to be implemented in future releases.  Feel free to follow the feature request for updates.
  3. Specific times can be disabled using the disabled Dates and adding a custom function based on your custom implementation. For example, here is a custom Progress Kendo UI Dojo which disables hours 1pm, 2pm, 8pm, and 9pm.  
  4. The Kendo UI DateTimePicker dropdown can be adjusted by configuring the animation.open.effects, popup.origin, and popup.position to your preference.  For example, here is a Progress Kendo UI Dojo with one approach.

If you have any further questions regarding your specific web application, please consider creating a support ticket for additional assistance.

Hope this information helps get you started!

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Alvin
Top achievements
Rank 1
answered on 25 Sep 2020, 04:48 AM

Hi Patrick, 

Would like to disable the selection of weekends and the past dates before the current date. 
I saw the link you posted. I don't really know how I can write the JS in. 

Please advise.

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 25 Sep 2020, 07:42 PM

Hello Alvin,

One way you can set it so the weekends and past dates before the current date are disabled is to use the min configuration and the previous implementation as shown in this Kendo UI DateTimePicker live demo

    <div id="example">
      <div class="demo-section k-content">
        <h4>Disable weekends and past dates</h4>
        <input id="datetime-picker" style="width: 100%">
      </div>

      <script>
        $(document).ready(function() {
          $("#datetime-picker").kendoDateTimePicker({
            value: new Date("11/13/2015"),
            min: new Date("11/13/2015"),
            disableDates: ["sa", "su"]
          });
        });
      </script>
    </div>

Please take a look at this Progress Kendo UI Dojo with the implementation shown above.

Regards,
Patrick
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Date/Time Pickers
Asked by
Alvin
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Alvin
Top achievements
Rank 1
Share this question
or