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, 2022 in Web Development by gaurav
• 23,260 points
4,250 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, 2022 by rajatha
• 7,640 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, 2022 in Web Development by gaurav
• 23,260 points
847 views
0 votes
0 answers

Jquery Ui date time picker

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

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
469 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, 2022 in Web Development by rajatha
• 7,640 points
5,446 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, 2022 in Web Development by gaurav
• 23,260 points
231 views
0 votes
1 answer

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

How to set jQuery draggable min/max-left and ...READ MORE

answered Jul 25, 2022 in Web Development by rajatha
• 7,640 points
385 views
0 votes
1 answer

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

How to set jQuery draggable min/max-left and ...READ MORE

answered Jul 25, 2022 in Web Development by rajatha
• 7,640 points
851 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, 2022 in Web Development by gaurav
• 23,260 points
993 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, 2022 in Web Development by rajatha
• 7,640 points
874 views
0 votes
1 answer

Why use jQuery on() instead of click()

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

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
234 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