Question 120946 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to alert user of date selection criteria?

I have seen this question being asked here:
Alert User When Selecting Disabled Date
Unfortunately, there is nothing to glean from the answers provided.

We have a requirement to prevent users from selecting from datepicker, days longer than 60 days.

Users are also not allowed to select 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 as far as those conditions are concerned.

However, because our users cannot select previous dates longer than 60 days and cannot select days greater than current date, they report that our system is not allowing them to select the dates they prefer.

Our proposed solution is give a user an alert that those dates are not allowed when attempting to click on them.

Any ideas how to add an alert message to the script below that informs a user that the dates s/he is clicking on is not allowed?

Below is the working script.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>

If it helps, this is a jQuery UI Datepicker.

Many thanks in advance

Tags:

2

Answers


  1. 0

    You can use the beforeShowDay option of the jQuery UI Datepicker to customize the appearance and behavior of individual dates in the calendar. The beforeShowDay function is called for each day in the calendar and receives a Date object as its parameter. You can use this function to check if the date is within the allowed range and, if not, return an array with a class name and an optional tooltip message to indicate that the date is disabled and why.

    To show an alert message when a disabled date is clicked, you can add a onSelect function to the Datepicker that checks if the selected date is disabled and, if so, displays an alert message to the user.

    Here’s an example of how you could modify your existing script to add these features:

        $(function() {
  var today = new Date();
  var sixtyDaysAgo = new Date();
  sixtyDaysAgo.setDate(today.getDate() - 60);
  
  $('#datepicker').datepicker({
    minDate: sixtyDaysAgo,
    maxDate: today,
    beforeShowDay: function(date) {
      var date1 = new Date();
      date1.setDate(today.getDate() - 60);
      var date2 = new Date();
      date2.setDate(today.getDate() + 1);
      if (date < date1 || date > date2) {
        return [false, 'disabled', 'This date is outside the allowed range'];
      } else {
        return [true, ''];
      }
    },
    onSelect: function(dateText, inst) {
      var selectedDate = $(this).datepicker('getDate');
      var disabledDates = $(this).datepicker('option', 'beforeShowDay');
      if (disabledDates(selectedDate)[0] === false) {
        alert('This date is outside the allowed range');
        $(this).val('');
      }
    }
  });
});

    In this modified script, we first define two Date objects to represent today’s date and 60 days ago. We then use these dates to set the minDate and maxDate options of the Datepicker.

    Next, we define the beforeShowDay function to check if the date is within the allowed range. If the date is outside the range, we return an array with the false value to disable the date, the disabled class to style the date in gray, and a tooltip message to explain why the date is disabled.

    Finally, we add an onSelect function to the Datepicker that checks if the selected date is disabled and, if so, displays an alert message to the user and clears the input field.

    Note that the onSelect function also checks if the date is disabled by calling the beforeShowDay function with the selected date and checking the first element of the returned array. This is necessary because the onSelect function is called before the beforeShowDay function and the latter has not yet had a chance to mark the date as disabled.

    Login or Signup to reply.
  2. 0

    it took a little work but I managed to get it done. Some features were also added to the code such as disabling weekends, if not useful just remove

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <style>
    .ui-datepicker-calendar .ui-state-disabled {
    pointer-events: auto;
    cursor: not-allowed !important;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      var today = new Date();
      var maxDate = today;
      var minDate = new Date(today.getTime() - 60 * 24 * 60 * 60 * 1000);

      $('#datepicker').datepicker({
        maxDate: maxDate,
        minDate: minDate,
        beforeShowDay: function(date) {
          var day = date.getDay();
          // Disable weekends
          return [(day != 0 && day != 6)];
        },
        onSelect: function(dateText, inst) {
          // Check if selected date is disabled
          var selectedDate = $(this).datepicker('getDate');
          var today = new Date();
          if (selectedDate < minDate || selectedDate > maxDate || selectedDate.getDay() == 0 || selectedDate.getDay() == 6) {
            alert("Please select a valid date!");
            $(this).val("");
          }
        }
      });

      // Add click event listener to disabled dates
      $(document).on('click', '.ui-datepicker-unselectable', function(e) {
        e.preventDefault();
        alert("This date is not available for selection!");
      });
    });
  </script>
</head>
<body>
  <p>Data: <input type="text" id="datepicker"></p>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search