Greetings experts, Please forgive me for the tags I selected. I wanted jQuery but the tag would not show up for selection. We have a requirement to prevent users from selecting from datepicker days longer than 60 days. Users are also not allowed from selecting days greater than current date. Days longer than 60 days are grayed out just as days greater than today's date are grayed out. The script below shows that this works just fine. However, when our users cannot select previous dates longer than 60 days and cannot select days greater than current date, they are confused as why they are unable to make these selections. Our proposed solution is to alert a user when attempting to click on disabled dates. Any ideas how to handle this? Your assistance is greatly appreciated. My current working script as far as date selection, is below: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(function() { $('#datepicker').datepicker({ minDate: -60, maxDate: 0 }); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html>

Hi @ Simflex , You can change the jquery-ui library to make it easier. Disabled dates (those outside the min/max) get the class ui-state-disabled added to them by the datepicker. Bind the click event to that class and set an alert. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> <script type="text/javascript"> $(function () { $('#datepicker').datepicker({ minDate: -60, maxDate: 0 }); $(document).on('click', '.ui-state-disabled', function () { alert('Invalid date!!!Only select dates within the previous 60 days!!!') }) }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"/></p> </body> </html> Best regards, Lan Huang If the answer is the right solution, please click " Accept Answer " and kindly upvote it. If you have extra questions about this answer, please click " Comment ". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Alert User When Selecting Disabled Date

Accepted answer

Lan Huang-MSFT 29,341 Reputation points Microsoft Vendor

2023-05-03T03:30:06.2166667+00:00
Hi @Simflex,

You can change the jquery-ui library to make it easier.

Disabled dates (those outside the min/max) get the class ui-state-disabled added to them by the datepicker. Bind the click event to that class and set an alert.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> <script type="text/javascript"> $(function () { $('#datepicker').datepicker({ minDate: -60, maxDate: 0 }); $(document).on('click', '.ui-state-disabled', function () { alert('Invalid date!!!Only select dates within the previous 60 days!!!') }) }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"/></p> </body> </html>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

1 person found this answer helpful.
Simflex 301 Reputation points

2023-05-03T12:33:05.9833333+00:00

Great solution. Thank you very much

Simflex 301 Reputation points

2023-05-03T22:09:37.88+00:00

Hey Lan, I know this problem is solved - thanks again for your help on it but it created another problem for me.

I do have another datepicker called dateProcessed. This datepicker only disables future date but user can go as far back as s/he wishes to.

I did not have any validation for that. However, when I click on the right > or any future date, it displays the same message that I am using for this solution.

Any ideas why that is happening and is there a solution for it?

For demonstration purposes, I am posting the original script that you modified just so you can see it.

<head> <script type="text/javascript"> $(function() { $('#dateProcessed').datepicker({maxDate: 0 }); }); </script> </head> <body> <p>Date: <input type="text" id="dateProcessed"> </body>
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Alert User When Selecting Disabled Date

0 additional answers

Your answer