Question

为了显示仅有月份的jquery日历，我使用了css作为

   <style>
      .ui-datepicker-calendar 
      {
         display:none
      }
   </style>

但是，此CSS已应用于完整页面，而其他datepicker控件已成为monthpicker。如何将其限制为仅一个控件。

    <input data-val="true" id="StartMonth" name="StartMonth" type="text" value="" /> 
    $('#StartMonth').focusin(function () 
    {
        $('.ui-datepicker-calendar').css("display", "none");
        $('#StartMonth').datepicker('setDate', new Date(year, month, 1)).trigger('change');
    });

Answer 1

在查询的帮助下，你可以达到理想的效果。请跟随小提琴。

http://jsfiddle.net/DBpJe/7376/

   $('#startDate').focusin(function(){
  $('.ui-datepicker-calendar').css("display","none");
});

Answer 2

你应该在 beforeShow 中将类（隐藏 .ui-datepicker-calendar ）添加到 $（输入）.datepicker（“widget”） em> datepicker选项，然后在 onClose datepicker选项中删除此类。

$('.datepicker-without-calendar').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  beforeShow: function(input) {
    $(input).datepicker("widget").addClass('hide-calendar');
  },
  onClose: function(dateText, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    $(this).datepicker('widget').removeClass('hide-calendar');
  }
});

$('.datepicker').datepicker();

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<input class="datepicker-without-calendar" type="text" />
<input class="datepicker" type="text" />

Answer 3

因为那里没有小提琴。使用该日历或容器的一些唯一ID或类，以便css仅适用于该日历。

例如

$(#mycalendarDiv .ui-datepicker-calendar).css("display","none");

show hide jquery datepicker calendar

3 个答案: