Disable the selection of weekends and the past dates before the current date

Hi Community,

Would like to disable the selection of weekends and the past dates before the current date. 

How should I write in JS? If so how?

Please advise. 

Hi Alvin,

As I can see in the Screenshot you are using Kendo Date picker, so you can refer below links to disable the dates and days using Kendo UI

https://stackoverflow.com/questions/52417280/how-to-disable-the-past-dates-in-the-kendo-date-picker/52419297

https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar/configuration/disabledates


Hope that will help you

Regards,

Krushna

Krushana Mantri wrote:

Hi Alvin,

As I can see in the Screenshot you are using Kendo Date picker, so you can refer below links to disable the dates and days using Kendo UI

https://stackoverflow.com/questions/52417280/how-to-disable-the-past-dates-in-the-kendo-date-picker/52419297

https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar/configuration/disabledates


Hope that will help you

Regards,

Krushna

 Hi Krushna,

I have a question if I want to put this in my OutSystems JS. How can I do it?

 

Information:

Hi Alvin,

you need to add this logic to your Kendo calender widget JS like what I did in below:

 Hi Krushna,

Based on my information given above, which id represent the "Calenderid" or is it an entire new id created.

If so where do I call this? Or I don't need to call it?

Hi Alvin,

Can you please share oml if possible so I can make changes there itself

Regards,

Krushna

Krushana Mantri wrote:

Hi Alvin,

Can you please share oml if possible so I can make changes there itself

Regards,

Krushna

 Hi Krushna,


Sorry but I am not allowed to share the oml.

But I can provide you the information you might need.

My Appt Date Time UI:

The Appointment Date input widget:

The KendoUI_DatePicker webblock:

 Inside the KendoUI_DatePicker webblock: 

I am thinking of putting the JS here. (Not sure if It is in the right place and if my JS is correct.)

If I click on the calendar Icon once, it will show to this in the properties:

If I click on the calendar Icon twice, it will show to this in the properties:


Solution

Hi Alvin,

The javascript should be like below

"
$(document).ready(function () {

 var datepicker = $('#"+WidgetId+"').kendoDatePicker({
        value: new Date(),
        min: new Date(),
        disableDates: ['sa', 'su'],
    }).data('kendoDatePicker');

}); 
"

Hope it will help you

Regards,

Krushna

Solution

Hi Alvin,

I would suggest not to use jscript to disable sundays in calendar this is achievable without using the jscript, please follow the below steps to do so:

1. Create a list of sundays/holidays from the preparation.

2.Pass the date list inside the "Disable Date" property that you don't want the user to be able to select. 

and use "MinDate (Date) " as currdate() to disable the past dates.

For more clarification please refer the below link.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Controls/Date_Picker

Hope this will help you

Regards,

Vipasha

Krushana Mantri wrote:


Hi Krushana

I used the above script and even edit some parts but I am receiving this error.

Hi Alvin,

I have created a component using KENDO, if you stuck anywhere for Date picker you can refer that here

hope that will help

Regards,
Krushna


Krushana Mantri wrote:

Hi Alvin,

I have created a component using KENDO, if you stuck anywhere for Date picker you can refer that here

hope that will help

Regards,
Krushna


 Thanks Krushna,


I referred to your file and encountered this when I publish. 

Unable to see the DatePicker Icon

 

Krushana Mantri wrote:

 The error I am having is $(...)kendo_DatePicker is not a function.

After googling, I suspect that my jQuery was included twice, once by the program that I was adding a jQuery function to and once by our in-house debugger. Do you know how I can fix this?