Date Picker and difference

kiwis · 12-31-2012, 10:49 PM

I need two textbox's to become date pickers for me and I need to be able to do these things

1. No be able to pick a date earlier than today (or within 3 days if i set that rule)
2. the second date can not be earlier than the first date.
3. I need to be able to count the difference in days between them.

I'm a PHP coder but know very little JavaScript.

How can I go about achieving this?

xelawho · 12-31-2012, 11:16 PM

I just made something very similar to this, so maybe you can use it. It works with jQuery, but in the end I figured it was better than reinventing the wheel.

If you are indeed a kiwi, you will want the date in dd/mm/yy format, which is what this has. If you're not, then I leave it to you to fix as punishment for impersonating one

Code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="start" />&nbsp;<input type="text" id="fin" size="30" /></p>
<div id="res"></div>
<script>
$(function()  {
		
        function getDiff() {
            var from = $("#start").val(); 
            var till = $("#fin").val();        
            var c = from.split("/");
            beg = new Date(c[2],c[1] - 1,c[0]);        
            var d = till.split("/");
            en = new Date(d[2],d[1] - 1,d[0]);       
            var rest = (en - beg)/86400000; 
            var txt=rest==0?"":rest+" days"
            $("#res").text(txt);                               
        }

	$("#start").datepicker({
            changeMonth:true,
			changeYear:true,
			showAnim:"fadeIn",
			gotoCurrent:true, 
			minDate:0, //change this to +3 to start 3 days from now
			dateFormat: "dd/mm/yy",
            onSelect: function(dateText, inst) { 
        $( "#fin" ).val(dateText);
		$( "#fin" ).datepicker( "option", "minDate", dateText);
		getDiff();
            } 
	});        
        
	$("#fin").datepicker({
			dateFormat: "dd/mm/yy",
            changeMonth:true,
			changeYear:true,
			showAnim:"fadeIn",
            onSelect: getDiff
        });	
 });
 </script>
</body>
</html>

kiwis · 01-02-2013, 08:41 AM

can i show how block dates with 3 or 5 or 7 days from being selected???

kiwis · 01-02-2013, 09:05 AM

Quote:

Originally Posted by kiwis

can i show how block dates with 3 or 5 or 7 days from being selected???

just worked it out

minDate:5, //change this to +3 to start 3 days from now