jasonhazel/gist:5576428

## gistfile1.js
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Date Picker BETA</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>

  <script type='text/javascript'>
    $(document).ready(function() {


      // have current_date.php simple return the date from the database.
      current_date = new Date();
      $.get('current_date.php', function(d){
        current_date = d;
      });

      // DatePicker
      // options can be combined.
      $picker = $( "#dateasspicker" ).datepicker({
        changeMonth:      true,
        changeYear:       true,
        minDate:          new Date(2008, 8 - 1, 3),
        maxDate:          new Date(),
        showOn:           "button",
        buttonImage:      "images/calendar.gif",
        buttonImageOnly:  false,
        dateFormat:       'yy-mm-dd',
        showAnim:         'fadeIn'
      }).datepicker('setDate', current_date);
      // ^--- jQuery calls can be chained.

      // a little dirty, but I haven't used the jQuery datepicker that much.
      adjustDate = function(direction) {
        var $picker = $('#dateasspicker');
        var date    = new Date($picker.datepicker('getDate'));
        date.setDate(date.getDate() + ( direction == 'next' ? 1 : -1 ));
        $picker.datepicker('setDate', date);
        return date;
      }

      // since both buttons are essentially doing the same thing
      $('#next, #previous').click(function(e){
        var direction = $(this).attr('id');
        var newDate = adjustDate(direction);

        // here is where we send to php
        // url would be test.php?date=[DATE HERE]
        $.post('test.php', { date: newDate.toString() }, function(d){
          // once we get the response, we dump it into the results div.
          // no need to reload the page, AJAX baby!
          $('#results').html(d);
        });

        // stop the link from acting like a link.
        e.preventDefault();
        e.stopPropagation();
      });
    });
  </script>
</head>
<body>
<h3>Because I'm a JavaScript. NOOB</h3>

<p>Date: <input type="text" id="dateasspicker" size="30" readonly /></p>
<a href="" id="previous">&laquo; Previous</a> |
<a href="" id="next">Next &raquo;</a>
<div id='results'></div>

</body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Date Picker BETA</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>

	<script type='text/javascript'>
	$(document).ready(function() {


	// have current_date.php simple return the date from the database.
	current_date = new Date();
	$.get('current_date.php', function(d){
	current_date = d;
	});

	// DatePicker
	// options can be combined.
	$picker = $( "#dateasspicker" ).datepicker({
	changeMonth: true,
	changeYear: true,
	minDate: new Date(2008, 8 - 1, 3),
	maxDate: new Date(),
	showOn: "button",
	buttonImage: "images/calendar.gif",
	buttonImageOnly: false,
	dateFormat: 'yy-mm-dd',
	showAnim: 'fadeIn'
	}).datepicker('setDate', current_date);
	// ^--- jQuery calls can be chained.

	// a little dirty, but I haven't used the jQuery datepicker that much.
	adjustDate = function(direction) {
	var $picker = $('#dateasspicker');
	var date = new Date($picker.datepicker('getDate'));
	date.setDate(date.getDate() + ( direction == 'next' ? 1 : -1 ));
	$picker.datepicker('setDate', date);
	return date;
	}

	// since both buttons are essentially doing the same thing
	$('#next, #previous').click(function(e){
	var direction = $(this).attr('id');
	var newDate = adjustDate(direction);

	// here is where we send to php
	// url would be test.php?date=[DATE HERE]
	$.post('test.php', { date: newDate.toString() }, function(d){
	// once we get the response, we dump it into the results div.
	// no need to reload the page, AJAX baby!
	$('#results').html(d);
	});

	// stop the link from acting like a link.
	e.preventDefault();
	e.stopPropagation();
	});
	});
	</script>
	</head>
	<body>
	<h3>Because I'm a JavaScript. NOOB</h3>

	<p>Date: <input type="text" id="dateasspicker" size="30" readonly /></p>
	<a href="" id="previous">« Previous</a> \|
	<a href="" id="next">Next »</a>
	<div id='results'></div>

	</body>
	</html>