1

わかりましたので、どこでも探しましたが、見つからないことに驚いています。

jQuery Datepicker API では、input タグを使用するか、span または div タグ内でのみ実装できることを知っています。

3 つのドロップダウン メニューのヘルパー関数として日付ピッカーを使用しています。

私は持っている：

<select name="dateSelect-day" id="dateSelect-day">
    <option value="01">01</option>
    .....
</select>
<select name="dateSelect-month" id="dateSelect-month">
    <option value="01">01</option>
    .....
</select>
<select name="dateSelect-year" id="dateSelect-year">
    <option value="01">01</option>
    .....
</select>

これは、日付を選択するための 3 つのドロップダウン メニューを定義します。基本的に、フォーム送信アクションは、これらのドロップダウン選択から値を送信します。

しかし、次のようにすでに実装されている日付ピッカーも必要です。

マークアップ:

<input type="text" size="35" id="singleDate" name="singleDate" />

JS:

<script>
$(function() {
    var dateFrom = $( "#dateFrom" );
    var dateTo = $("#dateTo");
    var singleDate = $("#singleDate");
    var formatter = $("#format");

    dateFrom.datepicker({
        dateFormat: "dd/mm/yy" , 
        // defaultDate: "+1w" ,   //1 week after today
        firstDay: 1 , //Monday is set as the first day of the week
        // minDate: "-3m" , //Minimum date is 3 months from today, use "y", "m","w","d"
        showOn: "both",
        buttonImage: "./calendar.png",
        buttonImageOnly: true,
        buttonText: "Pick a Date",
        numberOfMonths: 1,
        changeMonth: true,
        changeYear: true,
        // beforeShowDay: $.datepicker.noWeekends,
        beforeShowDay: $.datepicker.noWeekends,
        onClose: function( selectedDate ) {
            dateTo.datepicker("option", "minDate", selectedDate );
        }
    });

    dateTo.datepicker({
        dateFormat: "dd/mm/yy" , 
        firstDay: 1 , //Monday is set as the first day of the week
        // minDate: "-3m" , //Minimum date is 3 months from today, use "y", "m","w","d"
        showOn: "both",
        buttonImage: "./calendar.png",
        buttonImageOnly: true,
        buttonText: "Pick a Date",
        numberOfMonths: 1,
        changeMonth: true,
        changeYear: true,
        beforeShowDay: $.datepicker.noWeekends,
        onClose: function (selectedDate) {
            dateFrom.datepicker("option", "maxDate", selectedDate);
        }
    });

    singleDate.datepicker({
        dateFormat: "dd/mm/yy" , 
        // defaultDate: "+1w" ,   //1 week after today
        firstDay: 1 , //Monday is set as the first day of the week
        // minDate: "-3m" , //Minimum date is 3 months from today, use "y", "m","w","d"
        showOn: "both",
        buttonImage: "./calendar.png",
        buttonImageOnly: true,
        buttonText: "Pick a Date",
        numberOfMonths: 1,
        changeMonth: true,
        changeYear: true
    });

    formatter.change(function() {
        dateFrom.datepicker( "option", "dateFormat", $( this ).val() );
        dateTo.datepicker( "option", "dateFormat", $( this ).val() );
        singleDate.datepicker( "option", "dateFormat", $( this ).val() );
    });

    $("body").on('hover', function() {
        $('#val1').html($("#dateFrom").val());
        $('#val2').html($("#dateTo").val());
        $('#val3').html($("#singleDate").val());
    });
});
</script>

現在、私は3つの異なる日付ピッカーを持っています。最初の 2 つは日付範囲を選択するために使用されます。

選択後にドロップダウンメニューから値を自動的に選択するには、日付ピッカーが必要です。

4

1 に答える 1

1

だから解決策を思いついた：

var onClose = function (selectedDate) {
            var tokens = selectedDate.split('/');
            var day = tokens[0];
            var month = tokens[1];
            var year = tokens[2];

            $('select.dateSelect:selected').each(function() {
                var node = $(this);
                node.attr("selected",'');
            });

            $("#dateSelect-day option:nth-child(" + (parseInt(day)) +")").attr("selected", "selected");
            $("#dateSelect-month option:nth-child(0)").attr("selected", '');
            $("#dateSelect-month option:nth-child(" + (parseInt(month)+1) +")").attr("selected", "selected");
            $("#dateSelect-year").children().each(function() {
                var node = $(this);
                if (node.val() == year) {
                    node.attr("selected", "selected");
                    return;
                }
            })
        };
于 2012-12-13T05:50:52.323 に答える