2 jQuery datepickers 1 input field

Question

I would like to display 2 datepicker calendars (no restrictions) from 1 input field, how may I achieve this?

 $(function() {
    var date1 = $('#date1');
    var date2 = $('#date2');
    date1.datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            var date = $(this).datepicker("getDate");

            date2.datepicker("setDate", date);
            date2.datepicker( "show" );

        }
    });
    date2.datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            var date = $(this).datepicker("getDate");
            var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);

            date1.val(date1.val() + " - " + formattedDate);
        }
    });
});

See the fiddle http://jsfiddle.net/v2m4pn0h/ for a sketch draft of what I need - but only 1 calendar shows and the code is also unstable (try clicking the input field and clicking on the document multiple times and see what happens).

This is what I'm trying to achieve:

user_1178759 · Answer

I would recommend to work with two invisible inputs and one display container to show the selected date range. The two hidden elements are placed behind the display container as this makes sure the datepicker calendars are shown in the right spot.

$(function() {
   var date1 = $('#date1');
   var date2 = $('#date2');
   var completeDate = $('#complete_date');

   date1.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onClose: function(selectedDate) {
       var date = $(this).datepicker("getDate");
       var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
       completeDate.val(formattedDate);
       date2.datepicker("setDate", date);
       date2.datepicker("show");


     }
   });
   date2.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onClose: function(selectedDate) {
       var date = $(this).datepicker("getDate");
       var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
       completeDate.val(completeDate.val() + ' - ' + formattedDate);
     }
   });

   $('#complete_date').on('click', function() {
     date1.datepicker("show");
   })
 });

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
}
.date_wrapper {
  position: relative;  
}

.display_element {
  min-width: 150px;
}

.invisible {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

2 jQuery datepickers 1 input field

1 Answers