Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Date Picker and difference

    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?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>
    Last edited by xelawho; 12-31-2012 at 11:36 PM. Reason: More tweaking. I'm going to stop now, I promise

  • Users who have thanked xelawho for this post:

    kiwis (01-02-2013)

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    can i show how block dates with 3 or 5 or 7 days from being selected???

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kiwis View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •