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 3 of 3

Thread: Datepicker

  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Datepicker

    Can you help. I have two datepickers with a departure and return date. I need assistance with returning the date in dd/mm/yyyy and I would like to code the duration of dates ie 13/02/2014 to 14/02/2014 = 2 days. the code i have so far is

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>jQuery Datepicker: Disable past days</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker2').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
    });
    </script>
    </head>
    <body>
    <p><input type="text" id="datepicker2" /></p>
    </body>
    </html>
    Last edited by VIPStephan; 02-14-2014 at 05:56 PM. Reason: fixed code BB tags

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 544 Times in 541 Posts
    I think this might be what you're looking for...

    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    
      
      
    </head>
    <body>
     
    <label for="from">From</label>
    <input type="text" id="from" name="from">
    <label for="to">to</label>
    <input type="text" id="to" name="to">
    <div id="res"></div>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
      $(function() {
    var to;
    var from;
        $( "#from" ).datepicker({
          changeMonth: true,
          numberOfMonths: 1,
    	  dateFormat:"dd/mm/yy",
    	  minDate:"+0d",
          onClose: function( selectedDate ) {
    	  from=selectedDate;
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
    		display();
          }
        });
        $( "#to" ).datepicker({
          defaultDate: "+1w",
          changeMonth: true,
    	  dateFormat:"dd/mm/yy",
    	  minDate:"+0d",
          numberOfMonths: 1,
          onClose: function( selectedDate ) {
    	  to=selectedDate;
    		$( "#from" ).datepicker( "option", "maxDate", selectedDate );
    	display();
          }
        });
    	
    	function display(){
    	
    
    		if ($("#from").val()==""||$("#to").val()==""){
    		$( "#res" ).text("");
    		return;
    	}	
    
    			var fd=makeDates(from);
    		var td=makeDates(to);
    		
    	var timeDiff = Math.abs(td.getTime() - fd.getTime());
    		var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    		var suff = diffDays==1?"":"s";	
    		$( "#res" ).text(diffDays + " day"+suff+" difference between the two dates");	
    	}
    	
    	function makeDates(str){
    	var bits=str.split("/");
    	var dstr=new Date(bits[1]+"/"+bits[0]+"/"+bits[2]);
    	return dstr;	
    	}
      });
      </script> 
     
    </body>
    </html>
    Last edited by xelawho; 02-15-2014 at 06:21 AM.

  • Users who have thanked xelawho for this post:

    minkoko (02-18-2014)

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    myeik
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by xelawho View Post
    I think this might be what you're looking for...

    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    
      
      
    </head>
    <body>
     
    <label for="from">From</label>
    <input type="text" id="from" name="from">
    <label for="to">to</label>
    <input type="text" id="to" name="to">
    <div id="res"></div>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
      $(function() {
    var to;
    var from;
        $( "#from" ).datepicker({
          changeMonth: true,
          numberOfMonths: 1,
    	  dateFormat:"dd/mm/yy",
    	  minDate:"+0d",
          onClose: function( selectedDate ) {
    	  from=selectedDate;
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
    		display();
          }
        });
        $( "#to" ).datepicker({
          defaultDate: "+1w",
          changeMonth: true,
    	  dateFormat:"dd/mm/yy",
    	  minDate:"+0d",
          numberOfMonths: 1,
          onClose: function( selectedDate ) {
    	  to=selectedDate;
    		$( "#from" ).datepicker( "option", "maxDate", selectedDate );
    	display();
          }
        });
    	
    	function display(){
    	
    
    		if ($("#from").val()==""||$("#to").val()==""){
    		$( "#res" ).text("");
    		return;
    	}	
    
    			var fd=makeDates(from);
    		var td=makeDates(to);
    		
    	var timeDiff = Math.abs(td.getTime() - fd.getTime());
    		var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    		var suff = diffDays==1?"":"s";	
    		$( "#res" ).text(diffDays + " day"+suff+" difference between the two dates");	
    	}
    	
    	function makeDates(str){
    	var bits=str.split("/");
    	var dstr=new Date(bits[1]+"/"+bits[0]+"/"+bits[2]);
    	return dstr;	
    	}
      });
      </script> 
     
    </body>
    </html>
    Thanks a lot this is good explain.


  •  

    Posting Permissions

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