在jQuery Datepicker中用textbox替换年份下拉列表 [英] Replace year dropdown with textbox in jQuery Datepicker

问题描述

我正在使用datepicker中的经典文本框替换下拉列表多年，因为我想手动输入年份。
我替换它，但是当在datetime选择器中尝试点击日期时，年份和整个日期不能在文本框中显示。
我该怎么做？

I'm trying to replace dropdown list for years with classic text box in datepicker, because I want to enter years manually. I replaced it but when try click on day in datetime picker, year and whole date cannot be shown in text box. How can I do that?

这是我的小提琴： http：// jsfiddle。 net / Fa8Xx / 3567 / 。

Thanks in advance!

推荐答案

尝试这个：

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

小提琴： http://jsfiddle.net/Fa8Xx/3570/

这篇关于在jQuery Datepicker中用textbox替换年份下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！