Questions using a KendoDateTimePicker in Outsystems

[Alvin]

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. 

[Patrick | Technical Support Engineer, Senior]

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

[Alvin]

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.

[Patrick | Technical Support Engineer, Senior]

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