用 jQuery 日期选择器中的文本框替换年份下拉列表

Question

我想用日期选择器中的经典文本框替换年份下拉列表，因为我想手动输入年份。我替换了它但是当尝试在日期时间选择器中单击日期时，年份和整个日期无法显示在文本框中。我怎样才能做到这一点？

这是我的fiddle：http://jsfiddle.net/Fa8Xx/3567/。

Thanks in advance!

Answer 1

试试这个：

    <div class="demo">
    <p>Date: <input id="datepicker" type="text"></p>
    </div>

    $("#datepicker").on("focus", function () {
        bindCloseEvent();        
    });

    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        onSelect: function() {        
           var curDate = $(this).datepicker('getDate');        
            var month = $(".ui-datepicker-month").val();
            var year = $(".ui-datepicker-month").next("input").val();
            $("#datepicker").datepicker('setDate', new Date(year, month, $.datepicker.formatDate('dd', curDate)));
        },
    }).bind("click", function () {          
            $(".ui-datepicker-month").change(function (e) {
                bindCloseEvent();
            });            
   });


    function bindCloseEvent() {
        var text = $("<input type='text'/>");
        $(".ui-datepicker-year").before(text).hide();
        $('.ui-datepicker-close').click(function (e) {
            var curDate = $(this).datepicker('getDate');        
            var month = $(".ui-datepicker-month").val();
            var year = $(".ui-datepicker-month").next("input").val();
            $("#datepicker").datepicker('setDate', new Date(year, month, $.datepicker.formatDate('dd', curDate) + 1));
        });
    }


    var d = $("#datepicker").datepicker('getDate') || new Date();
    d.setFullYear(parseInt(this.value, 10));
    $("#datepicker").datepicker('setDate', d);

Fiddle : http://jsfiddle.net/Fa8Xx/3570/

用 jQuery 日期选择器中的文本框替换年份下拉列表

Replace year dropdown with textbox in jQuery Datepicker

jquery

textbox

jquery-ui-datepicker

drop-down-menu