We help IT Professionals succeed at work.

jquery datepicker make ALL sunday and monday unselectable

jordanking
jordanking asked
on
Hello,

I have a question as to whether this is possible before I attempt it.  I have a client company that provides a service for customers that is not available on sundays or mondays.  As a result they would like the datepicker to reflect that by making every monday and sunday unselectable.  Is this possible?

the date picker I currently have is used on an asp.net webform with a master page.  It appears as follows:
    <script type="text/javascript">
        $(function() {
        $("input[id$='txtDate']").datepicker({ showOtherMonths: true, selectOtherMonths: true, showButtonPanel: true, minDate: 1, dateFormat: 'dd/mm/yy' });
        });
      </script>

Thanks in adaznce
Comment
Watch Question

Can you share which plugin you are using for datepicker?  There are many with the same name.  Is this jquery UI, or jquery tools, or some other ?

Author

Commented:
I am using jQuery UI

with the following build
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.2.custom.min.js"></script>      
Here is a working example.  Basically, you apply the beforeShowDay function that will inspect the calendar day.  I've built this to look for day = 0 (Sunday) or day = 1 (Monday) and return false for that, otherwise true.
<!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 runat="server">
    <title>Untitled Page</title>
      <head>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
			<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>



			<style>
				* {margin:0;padding:0;}

				html, body
				{

					font-family: Arial;
					font-size: .95em;
					height: 100%;
					width: 100%;
					border: 0;
					padding: 0;
					margin: 0;
					line-height:1em;
					font-weight:normal;
				}

				.checked {border:solid 2px red;}
			</style>




      </head>
</head>

<body>
	<input type="date" id="thisDate" />
	<script type="text/javascript">



		$(document).ready(function(){
			$("#thisDate").datepicker({
				beforeShowDay: function(d){
					var dy = d.getDay();
					if(dy == 0 || dy == 1) {
						return[false,"closed"]
					} else {
						return[true,""]
					}
				}
			});
		});
	</script>

</body>



</html>

Open in new window

Author

Commented:
Wow, that was quick and works perfectly.  I am very grateful, good work.  I just changed the input name because it is in an asp.net masterpage and added the additional parameters i wanted to the date picker function.