1

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

我尝试了一些类似以下的方法。 我试过改变css。 

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

但这会影响两个日期选择器。

我曾尝试调用 onClick 函数。 

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

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

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

jsfiddle也添加了

4

3 回答 3

4

你可以这样做，

$(".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();
    });
于 2014-08-26T15:22:44.513 回答
1

尝试以下方法：

$(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。

编辑

更正了自定义样式。请现在检查小提琴。

于 2013-09-18T07:44:47.660 回答
0

明白了！！经过几次反复试验，我想我找到了解决办法。添加一个像这样的点击事件处理程序

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

但是，它仍然需要雕刻。

在JSFiddle中检查它

于 2013-09-18T07:00:37.353 回答