Question

我初始化jquery的monthPicker，如下面的代码所示。

我希望在点击期间根据monthpicker输入框中的现有值设置月/年下降。即如果值设置为“2015年5月”，那么月份选择器应显示带有2015年5月初始化下拉列表的日历。我的代码不是这样做的。

提前致谢！

$(document).ready(function()
    {


        $(".monthPicker").datepicker({
            dateFormat: 'M yy',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showAnim: '',
            duration: '',
            currentText: 'Present',
            beforeShow: function(input) {
                 setTimeout(function () {
                    $(input).datepicker("widget").find(".ui-datepicker-current").hide(); 
                    $("#ui-datepicker-div").addClass("hide-calendar");
                    $("#ui-datepicker-div").addClass('MonthDatePicker');
                    $("#ui-datepicker-div").addClass('HideTodayButton');
                    var thisCalendar = $(this);
                    $('.ui-datepicker-calendar').detach();
                 },1);
                }
            }
        });

        $(".monthPicker").focus(function () {
            var thisCalendar = $(this);
            $('.ui-datepicker-calendar').detach();
            $(".ui-datepicker-calendar").hide();

        });

        function onClickMonthPicker(){

    var currentDateOfAnalysis = $(".monthPicker").val();
     if(!$.isUndefinedOrEmptyObject(currentDateOfAnalysis)){

     var currentDate = $.datepicker.parseDate("dd M yy", "1 "+currentDateOfAnalysis);
     $(".monthPicker").datepicker('option','defaultDate', currentDate);
    }

 }

 <input name="monPickField" id="monPickField" class="monthPicker" onClick="onClickMonthPicker();"/>

Answer 1

尝试在beforeShow方法中添加对onClickMonthPicker的调用，如下所示......

beforeShow: function (input) {
        onClickMonthPicker();
        .... }

我注意到你有一个额外的}而且这行也是一个问题，如果（！$。isUndefinedOrEmptyObject（currentDateOfAnalysis））您可以尝试像检查空字符串一样简单来调试代码。有不同的方法可以检查，所以我让你修补它并自己决定。在这种情况下，我选择了简单的路线（见下面的代码）。

为了完成摇动，我还使用onClose方法完善了代码。

以下是完整的代码：

$(function () {
    $('.monthPicker').datepicker({
        dateFormat: 'M yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: '',
        duration: '',
        currentText: 'Present',
        beforeShow: function (input) {
            onClickMonthPicker();
            setTimeout(function () {
                $(input).datepicker("widget").find(".ui-datepicker-current").hide();
                $("#ui-datepicker-div").addClass("hide-calendar");
                $("#ui-datepicker-div").addClass('MonthDatePicker');
                $("#ui-datepicker-div").addClass('HideTodayButton');
                var thisCalendar = $(this);
                $('.ui-datepicker-calendar').detach();
            }, 1);
        },

        onClose: function (dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }

    });

    $(".monthPicker").focus(function () {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $(".ui-datepicker-calendar").hide();
    });

});

function onClickMonthPicker() {
    var currentDateOfAnalysis = $(".monthPicker").val();
    if (currentDateOfAnalysis != '') {
        var currentDate = $.datepicker.parseDate("dd M yy", "1 " + currentDateOfAnalysis);
        $(".monthPicker").datepicker('option', 'defaultDate', currentDate);
    }
}

没有更改您的HTML。希望这会有所帮助。

jquery datepicker（monthpicker） - 初始化Month＆amp;年份下拉点击

1 个答案: