public
Last active

  • Download Gist
date-calculator
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
<!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>

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.