Skip to Content (Press Enter)
2020-12-07 13-51-26
Shrinjala Singh
627Views
6Comments
Solved
[DatePicker] disable dates in reactive web
Question

Hi,

I am using date picker in reactive web, how to disable all the dates except 1st and 15th  in each months, and suppose if today is 1st september then calendar should show 15th sept 1st oct and so on enabled  . i have to show the next available 1st or 15th from the current date.

0
0
16 Sep 2020
Copy Link
2022-10-12 00-27-13
Ossama Ghanem
 
MVP
Solution

Hi Shrinjala,

You can easily extend your condition to cover multiple months and even a few years. In addition, you can set up the condition to cover 1 year and set the MaxDate property of the DatePicker component to 1 year. This will ensure that users can only select dates within the set up time frame.\

Ossama

See solution in context
1
0
16 Sep 2020
Copy Link
2020-12-07 13-51-26
Shrinjala Singh

Ossama Ghanem wrote:

Hi Shrinjala,

You can easily extend your condition to cover multiple months and even a few years. In addition, you can set up the condition to cover 1 year and set the MaxDate property of the DatePicker component to 1 year. This will ensure that users can only select dates within the set up time frame.\

Ossama

 

 yes but i want to implement for many years not for only 1 year.

0
1
16 Sep 2020
Copy Link
2022-10-12 00-27-13
Ossama Ghanem
 
MVP

Hi Shrinjala,

You would need to pass in the all the dates you want to exclude as a DateTime List in the DisabledDaysList property of the DatePicker.


Create a DateTime List variable in your page and use a condition to loop through upcoming dates and append them to this variable (whilst excluding the days you want to keep) in the OnInitialize action of your page. You can then pass in that variable in the DisabledDaysList property.


Ossama

2
0
16 Sep 2020
Copy Link
2020-12-07 13-51-26
Shrinjala Singh

Ossama Ghanem wrote:

Hi Shrinjala,

You would need to pass in the all the dates you want to exclude as a DateTime List in the DisabledDaysList property of the DatePicker.


Create a DateTime List variable in your page and use a condition to loop through upcoming dates and append them to this variable (whilst excluding the days you want to keep) in the OnInitialize action of your page. You can then pass in that variable in the DisabledDaysList property.


Ossama

 Hi

This solution is feasible for a month but i want to implement this for all months in calender year .

 

0
0
16 Sep 2020
Copy Link
2023-05-05 11-39-27
Raghuraj Singh padihar

Hi Ossama , 

I do not see this (Disabled date list ) property in my Date Picker , 

What could be possible reason can you help.?

0
0
22 Nov 2023
Copy Link
2020-11-20 12-13-23
pvivacqua

Shrinjala Singh wrote:

Hi,

I am using date picker in reactive web, how to disable all the dates except 1st and 15th  in each months, and suppose if today is 1st september then calendar should show 15th sept 1st oct and so on enabled  . i have to show the next available 1st or 15th from the current date.

 Hi Shirinjala,

Hope everything is all right. I would suggest using the diableDayFn of the Date picker component https://pikaday.com/examples/diableDayFn.html.

 

0
0
16 Sep 2020
Copy Link
2022-10-12 00-27-13
Ossama Ghanem
 
MVP
Solution

Hi Shrinjala,

You can easily extend your condition to cover multiple months and even a few years. In addition, you can set up the condition to cover 1 year and set the MaxDate property of the DatePicker component to 1 year. This will ensure that users can only select dates within the set up time frame.\

Ossama

1
0
16 Sep 2020
Copy Link
2020-12-07 13-51-26
Shrinjala Singh

Ossama Ghanem wrote:

Hi Shrinjala,

You can easily extend your condition to cover multiple months and even a few years. In addition, you can set up the condition to cover 1 year and set the MaxDate property of the DatePicker component to 1 year. This will ensure that users can only select dates within the set up time frame.\

Ossama

 

 yes but i want to implement for many years not for only 1 year.

0
1
16 Sep 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.