具有自定义封锁日期的jQuery Datepicker Daterange

时间:2019-03-16 10:00:48

标签: jquery-ui-datepicker

我想使用自定义阻止日期设置日期范围。附加到jsFiddle的链接在这里。现在,我想限制用户选择不包括封锁日期的日期范围。在此示例中,由于无法阻止3月24日和3月25日,因此用户无法选择3月22日至3月26日。

  <input type="text" class="form-control datePicker" id="dateRetrait" name="dateRetrait" />
                                    <label><b>Checkin:</b></label> <label id="checkinDate"></label>
                                    <label><b>Checkout:</b></label> <label id="checkoutDate"></label>

 unavailableDates = ['03-24-2019', '03-25-2019'];

$("#dateRetrait").datepicker({
                dateFormat: "MM d, yy",
                minDate: 0,
                beforeShowDay: dateRange,
                onSelect: DRonSelect
            });


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("");
                $("#dateRetrait").datepicker();
            }
            else {
                if ($.datepicker.parseDate("MM d, yy", $("#checkinDate").text()) >=
                    $.datepicker.parseDate("MM d, yy", dateText)) {
                    $("#checkinDate").text(dateText);
                    $("#checkoutDate").text("");
                    $("#dateRetrait").datepicker();
                }
                else {
                    $("#checkoutDate").text(dateText);

                    var total = $("#checkinDate").text() + "->" + $("#checkoutDate").text();

                    $("#dateRetrait").datepicker();
                    $("#dateRetrait").val(total);

                }
            }
        }

        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" : ""];
            var dmy = (date.getMonth() + 1);
            if (date.getMonth() < 9)
                dmy = "0" + dmy;
            dmy += "-";

            if (date.getDate() < 10) dmy += "0";
            dmy += date.getDate() + "-" + date.getFullYear();

            console.log(dmy + ' : ' + ($.inArray(dmy, unavailableDates)));

            if ($.inArray(dmy, unavailableDates) == -1) {
                return [true, "", "Available"];
            } else {
                return [false, "", "unAvailable"];
            }
        }

https://jsfiddle.net/92rxyoa4/3/

0 个答案:

没有答案