jQuery Datepicker 标记范围答案

【问题标题】：jQuery Datepicker mark rangejQuery Datepicker 标记范围
【发布时间】：2016-03-15 22:57:33
【问题描述】：

我有两个日期选择器应用于我网站上的 div 以实现日期范围。现在我想突出显示日历中的所有日期，这些日期在所选范围内（例如，在它们上应用 css 类）。

我发现了这个： Select a Range of dates and Highlight in jQuery Datepicker

但是如何将所有选定的日期插入到数组中？还是有更好的解决方案？

我该如何管理？我找不到 datepicker 插件的内置解决方案。

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

这是一个旧的，但我需要相同的功能，所以我是这样做的，以防有人需要它。

jQuery(document).ready(function(){

jQuery( "#start_date" ).datepicker({
    dateFormat:'yy-mm-dd',
    changeMonth: true,
    numberOfMonths: 3,
    rangeSelect:true,
    beforeShowDay: customRange,
    onClose: function( selectedDate ) {
        jQuery( "#end_date" ).datepicker( "option", "minDate", selectedDate );
    }
});
jQuery( "#end_date" ).datepicker({
    dateFormat:'yy-mm-dd',
    changeMonth: true,
    numberOfMonths: 3,
    rangeSelect:true,
    beforeShowDay: customRange,
    onClose: function( selectedDate ) {
        jQuery( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
    }
});
});
function customRange(date) {
    if(date >= jQuery('#start_date').datepicker('getDate') && date <= jQuery('#end_date').datepicker('getDate')) {
        return [true, 'highlight'];
    } else {
        return [true, ''];
    }
}

【讨论】：

【解决方案2】：

试试这个

<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript">
$(function(){
    $("#to").datepicker();
    $("#from").datepicker().bind("change",function(){
        var minValue = $(this).val();
        minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
        minValue.setDate(minValue.getDate()+1);
        $("#to").datepicker( "option", "minDate", minValue );
    })
});
</script>

例如：http://jsfiddle.net/dW4n8/2/

$("#input-service_date_leave, #input-service_date_return").datepicker({
        rangeSelect: true,
        beforeShow: customRange,
        onSelect: customRange,
    });

function customRange(input) {
    if (input.id == "input-service_date_leave") {

        $("#ui-datepicker-div td").die();

        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
    if (input.id == "input-service_date_return") {

        $("#ui-datepicker-div td").live({
            mouseenter: function() {
                $(this).parent().addClass("finalRow");
                $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
           },
            mouseleave: function() {
                $(this).parent().removeClass("finalRow");
                $("#ui-datepicker-div td").removeClass("highlight");
            }
        });

        var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
}

【讨论】：

对不起，我的意思是：我选择“开始日期”2013/01/01 和“迄今为止”2013/01/05，现在我想突出显示（例如添加一个css 类）到日期：2013/01/01、2013/01/02...2013/01/05。
感谢您的帮助！我们快到了，但不幸的是，这并不是我想要的。用户应选择第一个日期，选择第二个日期，然后范围应具有红色背景。看看这个小提琴：jsfiddle.net/dW4n8/81 现在在第一个日历上选择你的“开始日期”，在第二个日历上选择你的“到日期”。之后，两个日历中的范围都应该是红色的。你懂我的意思吗？非常感谢！