Question

我在页面中使用了两个日期选择器。一个日期选择器应显示日，月和年，而另一个应该只显示月份和年份。

我尝试过以下方法。 我曾尝试更改css。

.ui-datepicker-calendar {
    display: none;
}

但是这会影响到日期选择器。

我曾尝试在onClick上调用函数。

$('.month-picker').click(function(){
    $('.ui-datepicker-calendar').css('display','none');
});

当此函数隐藏ui-datepicker-calendar类时，它会显示ui-datepicker-header和输入框之间的间隔。

请帮我解决问题。提前感谢你。

jsfiddle也被添加

Answer 1

你可以这样做，

$(".date-picker").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        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));
            $(".ui-datepicker-calendar").hide();
        },
        beforeShow: function (dateText, inst) { $('.ui-datepicker-calendar').hide(); },
        onSelect: function (dateText, inst) { $(".ui-datepicker-calendar").hide(); }
    });

 add withoutDay class to input elements and add below jquery

 $(".withoutDay").focus(function () {
        $(".ui-datepicker-calendar").hide();
    });

Answer 2

疑难杂症!!经过几次试验和错误，我想我找到了一个解决方案。添加像这样的单击事件处理程序

$('.month-picker').on('click', function() {
    $('.ui-datepicker-calendar').hide();    
});

然而它仍然需要被雕刻。

在JSFiddle

中查看

Answer 3

尝试以下方法：

$(function() {
$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    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));
    }
});

}）;

这里是JsFiddle的相同内容。

修改

修正了自定义风格。请立即查看Fiddle。

datepicker在一个中显示天数，在另一个中隐藏天

3 个答案: