Date range picker on jquery ui datepicker

0 votes

I created a date range picker using jquery ui where you can use the same inline calendar to make both of your date selections.

See my fiddle here: http://jsfiddle.net/kVsbq/4/

JS

$(".datepicker").datepicker({
    minDate: 0,
    numberOfMonths: [12, 1],
    beforeShowDay: function (date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function (dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        if (!date1 || date2) {
            $("#input1").val(dateText);
            $("#input2").val("");
            $(this).datepicker();
        } else {
            $("#input2").val(dateText);
            $(this).datepicker();
        }
    }
});

What I want to be able to do is a range selector like this: http://jsfiddle.net/D3wLX/1/

If you select an earlier date then the earlier date is automatically made the first date in the range and the middle dates are highlighted. Right now on my original jquery ui solution it will just put the earlier date in the second input and not highlight the dates in between.

Jun 23 in Web Development by gaurav
• 18,960 points
497 views

1 answer to this question.

0 votes

Thanks I need this kind of code. Here is my code:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script     src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <div id="Datepicker"></div>
<p>
<label><b>Checkin:</b></label> <label id="checkinDate"></label>
<label><b>Checkout:</b></label> <label id="checkoutDate"></label>
</p>

/** Display Checkin Datepicker and Checkout DatePicker */
<script>
datePicker();
function datePicker(){
   $(document).ready(function(){
      $( "#Datepicker" ).datepicker({
         dateFormat: "MM d, yy",
     minDate: 0,
     maxDate: "+3M +0D", 
         beforeShowDay: dateRange,
     onSelect: DRonSelect
      });
   });
}

function dateRange(date){
   var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
   var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
   var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));
      $(document).ready(function(){
  // $("td.dp-highlight").text("Y");

});
answered Jun 27 by rajatha
• 7,440 points

Related Questions In Web Development

0 votes
0 answers

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from ...READ MORE

Jun 23 in Web Development by gaurav
• 18,960 points
101 views
0 votes
0 answers

Jquery Ui date time picker

I am using jquery date time picker and using start ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
38 views
0 votes
0 answers
0 votes
1 answer

Get current date in DD-Mon-YYY format in JavaScript/Jquery

get current date in jquery in dd/mm/yyyy ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
454 views
0 votes
0 answers

jQuery UI: connect sortable lists through tabs

Here is an example at jQuery UI official site, ...READ MORE

Jul 20 in Web Development by gaurav
• 18,960 points
34 views
0 votes
0 answers

How to set jQuery draggable min/max-left and min/max-right

I made a copy of JSbin for ...READ MORE

Jul 20 in Web Development by gaurav
• 18,960 points
25 views
0 votes
0 answers

How to set jQuery draggable min/max-left and min/max-right

I made a copy of JSbin for ...READ MORE

Jul 21 in Web Development by gaurav
• 18,960 points
141 views
0 votes
0 answers

jQuery UI Sortable Connected Lists - Get Changed Status

I'm implementing sortable plugin of jQuery UI. There ...READ MORE

Jul 29 in Web Development by gaurav
• 18,960 points
96 views
0 votes
1 answer

Get current date in DD-Mon-YYY format in JavaScript/Jquery

Get Current Date In DD-Mon-YYY Format In ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,440 points
58 views
0 votes
1 answer

Why use jQuery on() instead of click()

The . on() method attaches event handlers to ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
26 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP