jkeam/calendar.html

## calendar.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Select a Date Range</title><title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script type='text/javascript'>
   /*Any variables set outside of your function are known as global variables, which can be used in any function. Here, outside of your main function, I'm setting a global variable for $minDate, a variable that will represent the Start Date and a variable for $maxDate, the variable that will represent the End Date.*/
  // These variables can be used in any function because I've removed them from their original location, this is what's known as scope. Scope pertains to where you can see the variable. For instance, if I set the $minDate variable inside of the first onClose function, you can only reuse that variable inside of that function.
      //$minDate = $( "#to" ).datepicker( "option", "minDate", selectedDate );
      //  $maxDate = $( "#from" ).datepicker( "option", "maxDate", selectedDate );

    $(function() {
        $( "#from" ).datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3,
          onClose: function( selectedDate ) {
          }
        });

        $( "#to" ).datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3,
          onClose: function( selectedDate ) {
          }
        });
        /* Jon created a button with an ID of "go", when you click the "Click me" button it will perform the following: it assigns two variables, a date for the from field and a date for the to field.*/
        $('#go').click(function(){
          var fromText = $('#from').val();
          var toText = $('#to').val();
          $('#output').text('From: ' + fromText);
          $('#output').append('<br/>');
          $('#output').append('To: ' + toText);
          });
      });

  </script>
</head>

<body>
  <label for="from">From: </label>
  <input type="text" id="from" name="from">
  <label for="to">To: </label>
  <input type="text" id="to" name="to">
  <br/>
  <br/>
  <button id='go'>Click me!</button>
  <p id='output'></p>
</body>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Select a Date Range</title><title>jQuery UI Datepicker - Select a Date Range</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script type='text/javascript'>
	/Any variables set outside of your function are known as global variables, which can be used in any function. Here, outside of your main function, I'm setting a global variable for $minDate, a variable that will represent the Start Date and a variable for $maxDate, the variable that will represent the End Date./
	// These variables can be used in any function because I've removed them from their original location, this is what's known as scope. Scope pertains to where you can see the variable. For instance, if I set the $minDate variable inside of the first onClose function, you can only reuse that variable inside of that function.
	//$minDate = $( "#to" ).datepicker( "option", "minDate", selectedDate );
	// $maxDate = $( "#from" ).datepicker( "option", "maxDate", selectedDate );

	$(function() {
	$( "#from" ).datepicker({
	defaultDate: "+1w",
	changeMonth: true,
	numberOfMonths: 3,
	onClose: function( selectedDate ) {
	}
	});

	$( "#to" ).datepicker({
	defaultDate: "+1w",
	changeMonth: true,
	numberOfMonths: 3,
	onClose: function( selectedDate ) {
	}
	});
	/* Jon created a button with an ID of "go", when you click the "Click me" button it will perform the following: it assigns two variables, a date for the from field and a date for the to field.*/
	$('#go').click(function(){
	var fromText = $('#from').val();
	var toText = $('#to').val();
	$('#output').text('From: ' + fromText);
	$('#output').append('<br/>');
	$('#output').append('To: ' + toText);
	});
	});

	</script>
	</head>

	<body>
	<label for="from">From: </label>
	<input type="text" id="from" name="from">
	<label for="to">To: </label>
	<input type="text" id="to" name="to">
	<br/>
	<br/>
	<button id='go'>Click me!</button>
	<p id='output'></p>
	</body>