1

我想在具有多个实例的页面上使用 jQuery-UI，其中一些实例使用标准的完整日历格式，而其他实例使用没有日历的月/年。

月/年来自较早的堆栈：jQuery UI DatePicker to show month year only

<style type="text/css">
.calendar-off table.ui-datepicker-calendar {display:none !important;}
</style>

<script type="text/javascript">
$(document).ready(function() {
  $('#monthyearpicker1').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    beforeShow: function(input, inst) {
      $(inst.dpDiv).addClass('calendar-off');     
    },
    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));
    }
});
$( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd'
  });
});
</script>

<label>Month Year Picker: </label>
<input type="text" id="monthyearpicker1" class="monthyearpicker"><br /><br />

<label>Date Picker: </label>
<input type="text" id="datepicker1" class="datepicker">

我不希望日历显示在月/年选择器（.monthyearpicker）中，这就是我得到的行为。但是，我确实希望它显示在完整的日期选择器（.datepicker）中，而不显示。monthyearpicker 的 beforeShow 中的 addClass 似乎通过删除它的显示“渗透”到完整的 datepicker 中。我如何得到我的蛋糕并吃掉它？

请注意，我更喜欢使用类而不是 ID 来区分 datepicker 和 monthyearpicker，因为我将在一个页面上有多个实例。

非常感谢，斯科特

4

1 回答 1

2

您可以添加beforeShow以删除calendar-off类：

$( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    beforeShow: function(input, inst) {
      $(inst.dpDiv).removeClass('calendar-off');     
}
  });
});

JSFIDDLE 示例

于 2012-06-08T01:25:38.637 回答