Wybierz zakres dat na jQuery UI datepicker

Twój scenariusz był dokładnie tym, czego szukałem. Rozwidlałem twoje oryginalne skrzypce i dokonałem tylko niewielkiego dostosowania do twojego wyboru, aby działało tak, jak chciałeś.

onSelect: function(dateText, inst) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);


    if (!date1 || date2) {
        $("#input1").val(dateText);
        $("#input2").val("");
        $(this).datepicker();
    } else if( selectedDate < date1 ) {
        $("#input2").val( $("#input1").val() );
        $("#input1").val( dateText );
        $(this).datepicker();
    } else {
        $("#input2").val(dateText);
        $(this).datepicker();
    }
}

To, czego brakowało w oryginalnej sekcji, to po prostu sprawdzenie, aby porównać aktualną wybraną wartość daty z tą, która została już przechwycona.

Oto moje rozwidlone skrzypce: http://jsfiddle.net/sWbfk/

Stary, Twój kod jest naprawdę tym, czego potrzebowałem!

I z poprawką Jamiego Layne ' a, postanowiłem użyć go do zrobienia wtyczki.

Oto link do jsfiddle: http://jsfiddle.net/dxLRm/35/ (link zaktualizowany 2014/01/01)

Ponieważ muszę pokazać jakiś kod, oto co mam:

(function ($) {
$.prototype.rangedatepicker = function (o,x,y) {
    var dp = $.datepicker,
        cl = dp.markerClassName,
        di = 'data-rdp-i',
        df = 'data-rdp-f';

    switch(o)
    {
        case 'option':
            return $(this).datepicker('option');
        case 'hide':
            return $(this).datepicker('hide');
        case 'show':
            return $(this).datepicker('show');
        case 'getInitialDate':
            return dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||'');
        case 'getFinalDate':
            return dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||'');
        case 'getRange':
            var ini=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''),
                fin=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||'');
            return (!ini&&!fin)?null:[ini,fin];
        case 'getNumDays':
            var ini=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''),
                fin=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||'');
            return (ini+0==0||fin+0==0)?0:Math.round((fin-ini)/86400000)+1;
        case 'removeRange':
            return $(this).attr(di,'').attr(df,'').datepicker('setDate',null);
        case 'destroy':
            return $(this).removeAttr(di).removeAttr(df).datepicker('destroy');
        case 'serialize':
            return this[0].id+'_initial='+this[0].getAttribute(di)+'&'+this[0].id+'_final='+this[0].getAttribute(df);
        default:
        var defaults={
            allowSelectOneDay: false,
            alwaysSetDateToFirstDay: true,
            rangeEnabled: true,
            rangeClass: 'ui-state-default ui-state-active'//'dp-highlight'
        };
            o = $.extend({}, defaults, $.datepicker._defaults, o);
        return $(this).each(function () {
            if (!$.datepicker) return;
            var t = this,
                hd = !! ((' ' + t.className + ' ').indexOf(' ' + cl + ' ') + 1);
            $(t).datepicker($.extend({}, o, {
                beforeShowDay: function (d) {
                    if (o.rangeEnabled) {
                        var d1 = dp.parseDate(o.dateFormat, t.getAttribute(di) || ''),
                            d2 = dp.parseDate(o.dateFormat, t.getAttribute(df) || ''),
                            y = (function (d) {
                                try {
                                    return o.beforeShowDay.call(t, d);
                                } catch (e) {}
                            })(d) || [true, '', null],
                            x = ((y && y[0] !== false) || !y) && d1 && ((d.getTime() == d1.getTime()) || (d2 && d >= d1 && d <= d2));
                        return (!d1||!d2)?y||[true,'',null]:[y[0]&&x, (x ? o.rangeClass || defaults.rangeClass : '') + (y[1] ? ' ' + y[1] : ''), y[2]];
                    } else {
                        return (function (d) {
                            try {
                                return o.beforeShowDay.call(t, d);
                            } catch (e) {}
                        })(d) || [true, '', null];
                    }
                },
                onSelect: function (dt, x) {
                    if (o.rangeEnabled) {
                        var i = t.getAttribute(di) || '',
                            f = t.getAttribute(df) || '',
                            d1 = dp.parseDate(o.dateFormat, i),
                            d2 = dp.parseDate(o.dateFormat, f),
                            s = dp.parseDate(o.dateFormat, dt);
                        if ((dt == i && dt == f) || (!o.allowSelectOneDay && ((dt == i && !f) || (dt == f && !i)))) {
                            t.removeAttribute(di);
                            t.removeAttribute(df);
                            $(t).datepicker('setDate', null);
                        } else if (!d1 || d2) {
                            t.setAttribute(di, dt);
                            t.removeAttribute(df);
                            o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', s);
                        } else if (s < d1) {
                            t.setAttribute(df, i);
                            t.setAttribute(di, dt);
                            o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', s);
                        } else {
                            t.setAttribute(df, dt);
                            o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', d1);
                        }
                    } else {
                        t.removeAttribute(di);
                        t.removeAttribute(df);
                        $(t).datepicker('setDate', dp.parseDate(o.dateFormat, dt));
                    }

                    try {
                        if($(t).datepicker('getDate'))o.onSelect.call(t, dt, x);
                    } catch (e) {}
                }
            }));
        });
    }
};
})(window.jQuery);

Powinieneś uzyskać dostęp do fiddle i przeczytać listę rzeczy do zrobienia!

Każdy pomysł lub fragment kodu jest doceniany!

Szukałem również sposobu na rozszerzenie wtyczki Datepicker jQuery, aby wykorzystać stylizację Bootstrap i natknąłem się na ten mały klejnot:

Bootstrap-date Range Picker Dan Grossman pokazuje kilka przykładów z działającym kodem.

Oto projekt GitHub .

Na koniec, oto zrzut ekranu przedstawiający prostotę i moc projektu:

Szukając selektora zakresu dat znalazłem tę stronę. Wypróbowałem większość sugerowanych pomysłów, a nawet demonstrowałem tutaj i przekształciłem to wszystko w łatwe w użyciu i zintegrowane Rozszerzenie: https://github.com/BuroRaDer/DateRangePicker . Wypróbuj stronę demo, aby zobaczyć, jak to działa. Myślę, że mógłbym przekształcić go w prawdziwe rozszerzenie jQuery, ale na razie jestem zadowolony ze sposobu działania.

Live demo:

• http://lescamelias.eu/en/availability
• http://maisonnera.eu/

Obie strony Drupal korzystają z modułu kalendarz dostępności, do którego został on zintegrowany.

Szukałem wersji, która będzie działać nawet wtedy, gdy nie jest inlined. Chciałem móc kliknąć na pola wejściowe, aby odpalić range datepicker. Wszystkie przykłady datepicker zakres mogłem znaleźć były inlined (w tym wersje mcestone i Jamie Layne powyżej, które są podstawą dla tego rozwidlonego kodu).

Oto skrzypce: http://jsfiddle.net/boson/pjffdtz2/

Trudną częścią wydaje się być uzyskanie datepicker do obsługi wielu wejść, gdy nie jest inlined. Datepicker nie poradzi sobie z dwoma wejściami, jeśli chcesz otworzyć datepicker na Focusie - zdecydowanie była "sztuczka". Jeśli powiązasz datepicker z ukrytym wejściem (display:none), Utwórz to ukryte wejście przed widocznymi wejściami, a następnie niech twoje widoczne wejścia pokażą datepicker podczas zdarzenia kliknięcia, wszystko jest dobre.

Więc wziąłem oryginalną odpowiedź i wprowadziłem kilka drobnych zmian:

• w html Utwórz ukryte wejście powiązane z datepicker. List it przed widocznymi wejściami.
• w html użyj zdarzenia kliknięcia widocznych wejść, aby wyświetlić datepicker powiązany z ukrytym wejściem.
• w JavaScript datepicker onSelect, tymczasowo umieść datepicker w trybie inline, dopóki obie daty nie zostaną kliknięte. Pozwala to kliknąć na wiele dat przed zamknięciem datepicker (zakres " do "daty i" od " daty) - zasadniczo zmienia datepicker w multiclick datepicker.
• w datepicker onClose, wyłącz Tryb inline. Pozwala to komuś kliknąć pola wejściowe, aby ponownie otworzyć datepicker.
• w programie beforeShow przesuń datepicker w dół o kilka pikseli, aby zobaczyć pola wejściowe i datepicker

Oto kod:

$(function() {
  $(".rangepicker").datepicker({
    minDate: 0,
    numberOfMonths: [2, 1],
    beforeShow: function (input, inst) {
      var rect = input.getBoundingClientRect();
      setTimeout(function () {
	      inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
      }, 0);
    },
    beforeShowDay: function(date) {
      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
      var isHighlight =
         date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));
      return [true, isHighlight ? "dp-highlight" : ""];
    },
    onSelect: function(dateText, inst) {
      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
      var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

      if (!date1 || date2) {
        $("#input1").val(dateText);  
        $("#input2").val("");        
      } else if (selectedDate < date1) {
          $("#input2").val($("#input1").val()); 
          $("#input1").val(dateText);  
      } else {
          $("#input2").val(dateText);  
      }
      $(this).data('datepicker').inline = true;           
      $(this).datepicker();
    },
    onClose: function() {
      // Since we went inline as soon as the date input was clicked
      // (to leave the datepicker up for both dates selection),
      // turn inline back off again so date input click will once again
      // display the datepicker
      $(this).data('datepicker').inline = false;
    }
  });
});

.dp-highlight .ui-state-default {
          background: #484;
          color: #FFF;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="input1_1" class="rangepicker" style="display: none">
<p>
    Dates:
    <label><b>To:</b></label>
    <input type="text" id="input1" onclick="$('.rangepicker').datepicker('show');">
    <label><b>From:</b></label>
    <input type="text" id="input2" onclick="$('.rangepicker').datepicker('show');">
    <button id="done">Done</button>
</p>

Dzięki, potrzebuję takiego kodu. Oto Mój kod:

<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");

});
   return [true, isHighlight ? "dp-highlight" : ""];
}

function DRonSelect(dateText, inst) {
   var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
   var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
      if (!date1 || date2) {
         $("#checkinDate").text(dateText);
     $("#checkoutDate").text("");
         $("#Datepicker").datepicker();
      } 
      else {
         if ( $.datepicker.parseDate("MM d, yy", $("#checkinDate").text()) >= 
$.datepicker.parseDate("MM d, yy", dateText)) {
            $("#checkinDate").text(dateText);
            $("#checkoutDate").text("");
            $("#Datepicker").datepicker();
         }
         else {
        $("#checkoutDate").text(dateText);
            $("#Datepicker").datepicker();
         }
      }   
}
</script>

Mój kod jest przykładowym kodem pochodzącym z innych, ale różni się wyborem daty, zakresem dat i higlights. Stworzyłem i zapisałem kod w JSFIDDLE

Https://jsfiddle.net/kk585b4g/