Question

我需要在同一页面上有两个datepicker实例，但是它们需要使用不同的设置，具体来说，我需要'datepicker A'来显示点击的完整日期日历，但是我需要'datepicker B'才能显示点击日期日历，因为'datepicker B'设置为仅显示月/年。

通过玩一下，我发现我可以在'datepicker B'上添加onChow（一个CSS类），以便它不显示日历（display：none）。但这会产生一个新问题，其中会发生以下情况：

点击日期选择器A和完整的日历显示（甜蜜！）。
点击日期选择器B，没有日历显示（是的，宝贝！）。
再次点击datepicker A ......并且完整日历不再显示了...（嗯？）。

所以，我玩了一些，并意识到我可以简单地在'datepicker A'，removeClass beforeShow上做相反的事情，以确保即使在点击其他日期选择器后仍然显示完整日历。这似乎工作得很好。

但是，我觉得应该有更好的方法来做到这一点？为什么我必须在日期选择器之间添加/删除类才能让它们在不同的设置上工作？有没有更好的方法来实现这一目标？

这是一个小提琴示例和我用于“hacky”解决方案的代码：http://jsfiddle.net/sergeidave/xt9vsjnq/

HTML：

<div>
    <label>Date with Calendar:</label>
    <input id="datepicker" name="datepicker" type="text"/>
</div>
<div>
    <label>Month-Year Only:</label>
    <input id="monthpicker" name="monthpicker" type="text"/>
</div>

JQUERY：

$(function() {
    $( "#datepicker" ).datepicker({
        beforeShow: function (e, t) {
            $("#ui-datepicker-div").removeClass("hide-calendar");                    
        },
    });
    $( "#monthpicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        beforeShow: function (e, t) {
            $("#ui-datepicker-div").addClass("hide-calendar");                    
        },
        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));
        }
    });
});

CSS：

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

jquery datepicker：具有不同设置的多个实例

0 个答案: