• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 349
  • Last Modified:

jQuery - disable Sat from being selected in datetime picker.

Hi,
The code below displays a calendar with all Sundays disabled, is it possible to also disable Saturdays from being selected if the store name selected is “Store two”??

Thanks in advance for your feedback.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/jquery_ui/css/custom-theme/jquery-ui-1.8.16.custom.css"/>
<script type="text/javascript" src="/ScriptLibrary/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript"> 
	$(function(){
 
 	$('#date_required').datepicker({ 
        dateFormat: 'dd/mm/yy',
        minDate: new Date(2011, 11, 23),
        maxDate: new Date(2012, 02, 21),
		beforeShowDay: noSunday, 
        showOn: "both", 
        buttonImage: "/images/calendar.gif", 
        buttonImageOnly: true 
      }); 
      function noSunday(date){ 
          var day = date.getDay(); 
                      return [(day > 0), '']; 
      }; 
 
 
 
});
	
</script>
<style type="text/css"> 
			
			/* css for timepicker */
			.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
			.ui-timepicker-div dl { text-align: left; }
			.ui-timepicker-div dl dt { height: 25px; }
			.ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
			.ui-timepicker-div td { font-size: 90%; }
			.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
			
</style>
</head>
 
<body>
          <select name="order_details[store_name]" id="store_name">
                       <option value="Store one"  >Store one</option>
                       <option value="Store two"  >Store two</option>
                       <option value="Store three"  >Store three</option>
                     </select>
<br /><br /><br /><br />
 
<input name="order_details[date_required]" id="date_required" value="" size="20">
 
 
 
 
</body>
</html>

Open in new window

0
sabecs
Asked:
sabecs
  • 2
  • 2
1 Solution
 
StingRaYCommented:
Try this:

<script type="text/javascript">
        $(function(){
 
        $('#date_required').datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: new Date(2011, 11, 23),
        maxDate: new Date(2012, 02, 21),
                beforeShowDay: noSaturdayAndSunday,
        showOn: "both",
        buttonImage: "/images/calendar.gif",
        buttonImageOnly: true
      });
      function noSaturdayAndSunday(date){
          var day = date.getDay();
                      return [(day > 0 && day < 6), ''];
      };
 
 
 
});
       
</script>
0
 
sabecsAuthor Commented:
Thanks StingRaY, that disbales Sat & Sun which is good, but how do I trigger this only if
<option value="Store two"  >Store two</option>
is selected as the store_name

I only want Sat disabled when Store one & Store three are selected, but disable Sat & Sun when Store two is selected.

I hope that makes sense.
0
 
StingRaYCommented:
Then, try this:

<script type="text/javascript"> 
        $(function(){
 
        $('#date_required').datepicker({ 
        dateFormat: 'dd/mm/yy',
        minDate: new Date(2011, 11, 23),
        maxDate: new Date(2012, 02, 21),
                beforeShowDay: noSomeDay, 
        showOn: "both", 
        buttonImage: "/images/calendar.gif", 
        buttonImageOnly: true 
      }); 
      function noSomeDay(date){ 
          var day = date.getDay(); 
          if ($('option[value="Store two"]:checked').size() > 0) {  // Store two is selected
              return [(day > 0 && day < 6), ''];  // Disable both Saturday and Sunday
          } else { // Store one OR store three is selected
              return [(day < 6), ''];    // Disable Saturday
          }
      }; 
 
 
 
});
        
</script>

Open in new window

0
 
sabecsAuthor Commented:
Thanks StingRaY, thats fantastic...
I just had to change checked to selected in line below and it worked perfectly..

if ($('option[value="Store two"]:checked').size() > 0) {
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now