Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
  <script type='text/javascript'>
    $(function(){
      // Define an array to store your already selected Dates
      var selectedDates = [];
      
      // Set up your Datepickers to check if any of the selectedDates should be enabled
      $('.datepicker').datepicker({
          beforeShowDay: function(date){
              // Check if this date exists in the selectedDates collection
              return selectedDates.indexOf($.datepicker.formatDate('mm/dd/yy', date)) == -1 && $.datepicker.noWeekends(date);
          }
      });
      
      // When your datepicker changes, add the value to the array (if it doesn't exist)
      $('.datepicker').change(function(){
          // Clear out the selectedDates and add each of the currently selected values
          selectedDates = [];
          // Add each of the currently selected Dates
          $('.datepicker').each(function(){
            if($(this).val().length > 0){
              // Add it to the collection
              selectedDates.push($(this).val());
            }
          });
      });
    });
    
  </script>
</head>
<body>
  Date 1:<br />
  <input class='datepicker' /><br />
  Date 2:<br />
  <input class='datepicker' /><br />
  Date 3:<br />
  <input class='datepicker' /><br />
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rionmonsterpro
0viewers