将日历隐藏在数据贴纸上

Question

 $('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, 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)); } }); $('.datepicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy dd', 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)); } }); 

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

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" /> <input class="year" type="text" id="" /> <input class="datepicker" type="text" id="" /> 

我想要的是当我点击年份它不会显示日历。

我可以说它

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

但如果我这样做，这将影响所有日期选择器。 我需要的是指定我需要隐藏日历的日期选择器

Answer 1

jQuery UI Datepicker小部件没有onOpen选项，您应该使用选项beforeShow 。

此外，您应该将您的类添加到$（this）.datepicker（'widget'）或在beforeShow中使用setTimeout（） ，因为此事件在创建table.ui-datepicker-calendar之前启动。

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

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

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" /> <input class="year" type="text" id="" /> <input class="datepicker" type="text" id="" />