Skip to content

Instantly share code, notes, and snippets.

@clemdavies

clemdavies/date-calculator

Last active December 22, 2015 20:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clemdavies/6528511 to your computer and use it in GitHub Desktop.
Save clemdavies/6528511 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
date-calculator
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>date-calculator</title>
<link href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css' />
<script src="http://code.jquery.com/jquery-1.9.1.js" type='text/javascript' language='javascript'></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type='text/javascript' language='javascript'></script>
<style>
.error
{
background-color:orange;
}
#date_calulator input
{
width:100px;
}
</style>
</head>
<body>
<div id='date_calulator'>
<input type='text' id='from' value='start date' /><input type='text' id='to' value='end date' />
<input id='calculate' type='button' value='calculate' />
<div id='result'></div>
</div>
</body>
</html>
<script type='text/javascript' language='javascript'>
$(document).ready(function(){
var fromInput = $('#from');
var toInput = $('#to');
var resultDiv = $('#result');
var calculateButton = $('#calculate');
var fromDate;
var toDate;
fromInput.datepicker({
changeMonth: true,
changeYear:true,
defaultDate: "+1w",
onSelect: function( selectedDate ) {
fromInput.addClass('selected');
fromDate = new Date (selectedDate);
toInput.datepicker( "option", "minDate", selectedDate );
}
});
toInput.datepicker({
changeMonth: true,
changeYear:true,
defaultDate: "+1w",
onSelect: function( selectedDate ) {
toInput.addClass('selected');
toDate = new Date(selectedDate);
fromInput.datepicker( "option", "maxDate", selectedDate );
}
});
calculateButton.on('click',function(){
if( toDate && fromDate ){
var result = new Date(toDate.getTime() - fromDate.getTime());
if(result.valueOf() / result.valueOf()){
$('#from,#to').toggleClass('error',false);
resultDiv.text(result.valueOf() / (1000*60*60*24) + ' days');
return;
}
}
$('#from,#to').not('.selected').toggleClass('error',true);
});
$('#from,#to').on('click',function(){
$(this).toggleClass('error',false);
});
});
</script>
@clemdavies
Copy link
Author

fixed a NaN result from being shown.
as onClose triggers on close not on selection of a day ;/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment