Last active
December 17, 2015 07:58
-
-
Save jasonhazel/5576428 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment