Replace year dropdown with textbox in jQuery Datep

问题:

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/