带有选择下拉菜单而不是输入标签字段的日期选择器

Question

好的，所以我到处找这个，但因为找不到它而感到惊讶。

我知道 jQuery Datepicker API 只允许使用输入标签或在 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>

它定义了我的三个下拉菜单来选择日期。本质上，表单提交操作将发送来自这些下拉选择的值。

但我还需要一个已经像这样实现的日期选择器：

标记：

<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 个用于选择日期范围。但我需要帮助的是最后一个名为 singleDate 的日期选择器。

我需要日期选择器在被选中后自动从下拉菜单中选择值。

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