Replace year dropdown with textbox in jQuery Datepicker

*爱你&永不变心* 提交于 2019-12-11 10:00:01

问题


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?

This is my fiddle: http://jsfiddle.net/Fa8Xx/3567/.

Thanks in advance!

回答1:


Try this :

    <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/



来源:https://stackoverflow.com/questions/32466412/replace-year-dropdown-with-textbox-in-jquery-datepicker

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!