Question

我想在具有多个实例的页面上使用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（.datepicker）中，不显示它。 monthyearpicker的beforeShow中的addClass似乎通过删除它的显示来“渗透”到完整的日期选择器中。我如何得到蛋糕并吃掉它？

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

非常感谢，斯科特

Answer 1

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

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

JSFIDDLE EXAMPLE

JQuery-UI月/年选择器和完整的日历选择器在同一页面上

1 个答案: