1

複数のインスタンスがあるページでjQuery-UIを使用したいのですが、一部のインスタンスは標準の完全なカレンダー形式を使用し、他のインスタンスはカレンダーなしで月/年を使用します。

月/年は以前のスタックからのものです：月年のみを表示するjQuery UIDatePicker

<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に「ブリードスルー」しているように見えます。ケーキを手に入れて食べるにはどうすればよいですか？

1つのページにそれぞれのインスタンスが複数あるため、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 に答える