JQuery 日期选取器隐藏页面上一个日历中的日期

JQuery Datepicker hide dates from one calendar on a page

本文关键字：日期 上一个 日历 选取 隐藏 JQuery      更新时间：2023-09-26

我在同一页面上有几个日期选择器，需要一个只显示月份和年份，而其他应该显示带有日期的完整日历。我知道，为了向一个单独的日期选择器隐藏几天，我可以做这样的事情：

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

但这会隐藏所有日历中的日期。如何确保其他日期选取器保留日历视图？

编辑我确实尝试了嵌套 CSS，但仍然缺少一些东西。对于 HTML 部分，我大致有：

<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>

和JS代码$('.monthly-picker').datepicker();

尽管如此，做一些类似的事情 

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

不会产生预期的结果。

在容器元素上为 use 提供一个 id。

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

编辑：http://jsfiddle.net/h8DWR/是处理日期选择器特性的解决方案。 这个想法是使用样式元素在选择特定日期选择器时添加样式，然后在关闭时将其删除。

我做了一点不同...

.HTML 

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

.CSS

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

jQuery

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        yearRange: '1980:' + new Date().getFullYear(),
        beforeShow: function(el, dp) { 
            $('#ui-datepicker-div').addClass('hide-calendar');
        },
        onClose: function(dateText, inst) { 
            $('#ui-datepicker-div').removeClass('hide-calendar');
            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));
        }
    });
});

小提琴

方式略有不同

$('.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="" />

相关文章：