2

日付範囲を実装するために、Web サイトの div に 2 つの日付ピッカーを適用しています。ここで、選択した範囲内にあるカレンダー内のすべての日付を強調表示したいと思います (たとえば、それらに css クラスを適用します)。

私はこれを見つけました: 日付の範囲を選択し、jQuery Datepicker で強調表示します

しかし、選択したすべての日を配列に挿入するにはどうすればよいでしょうか? それとももっと良い解決策がありますか？

どうすればこれを管理できますか? datepicker プラグインの組み込みソリューションが見つかりませんでした。

4

2 に答える 2

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, ''];
    }
}
于 2016-03-15T14:57:33.443 に答える
0

これを試して

<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-02-16T11:24:38.527 に答える