0

I'm trying to do something like in this thread: Date range picker on jquery ui datepicker

But I dont want the datepicker to be inline, and this code only works with an inline datepicker.

I only need the datepicker when selecting #date1 or #date2 inputs.

I must be easy, but I'm stuck here and the only solutions I find with google are plugins or the inline datepicker.

Community
  • 1
  • 1
Alex
  • 1,230
  • 2
  • 24
  • 46

1 Answers1

0

jQuery UI's DatePicker is dropdown by default, so the example you found is a little out of date I think.

https://jsfiddle.net/gRoberts/z4j227h6/

$( "#from" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
});
$( "#to" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  },
  beforeShowDay: function (date) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#from").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#to").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
  },
});

The above code/fiddle shows that with a few minor changes, you can replicate the functionality in a dropdown.

HTH.

Gavin
  • 6,284
  • 5
  • 30
  • 38
  • Thanks, It's ok, but this one closes the datepicker when you choose one of the dates. I need the datepicker opened until you select both dates. – Alex May 09 '16 at 11:02
  • This is a slightly hacky method - https://jsfiddle.net/gRoberts/z4j227h6/1/ - Basically you have to keep it inline but show/hide it. You may want to alter it to shift focus to the second input once the date is selected on the first. – Gavin May 09 '16 at 11:17
  • at this moment I did this: leave the datepicker inline, css -> .datepicker { position: absolute; display: none} and the javascript: $("#date1, #date2").focus(function(){ $(".datepicker").show(); }); and finally y used a .hide() method when both date inputs have some date inside. I don't like this sollution, but it seems it's working. – Alex May 09 '16 at 12:46