Question

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

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

但是如何在阵列中插入所有选定日期？或者甚至有更好的解决方案？

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

Answer 1

试试这个

<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');
        }
    }
}

Answer 2

这是一个旧的，但我需要相同的功能，所以这是我如何做以防万一有需要。

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, ''];
    }
}

jQuery Datepicker标记范围

2 个答案: