同一页面上的两个具有不同 CSS 样式的 jQuery 日期选择器答案

【问题标题】：Two jQuery datepicker on the same page with different CSS style同一页面上的两个具有不同 CSS 样式的 jQuery 日期选择器
【发布时间】：2016-04-25 10:14:14
【问题描述】：

我正在尝试在同一页面上实现几个 jQuery 日期选择器，不同之处在于其中一个将成为月份选择器，使用jQuery UI DatePicker to show month year only（或...http://jsfiddle.net/DBpJe/7722/）建议的解决方案

关键是，如果我将以下 CSS 代码添加到我的 CSS 文件中以隐藏选择日期的能力......那么这两个日历隐藏了选择日期的能力，而不仅仅是我需要的那个......似乎这是一种全有或全无的方法

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

有没有一种方法可以区分普通日期选择器和我创建的自定义月份选择器（基于 jQuery 日期选择器）？

这是我的 HTML..

<input type="text" size="12" name="codeFlowDate" id="MyDate" class="text" />
<input type="text" size="12" name="codeFlowDate" id="MyMonth" class="text" />

这就是 JS

$(function() {
  $('#MyDate').datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    //showButtonPanel: true,
    maxDate: +0,
  });
});

$(function() {
  $('#MyMonth').datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    maxDate: +0,
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }

      if (isDonePressed()) {
        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)).trigger('change');

        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    beforeShow: function(input, inst) {
      inst.dpDiv.addClass('month_year_datepicker')

      if ((datestr = $(this).val()).length > 0) {
        year = datestr.substring(datestr.length - 4, datestr.length);
        month = datestr.substring(0, 2);
        $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
        $(this).datepicker('setDate', new Date(year, month - 1, 1));
        $(".ui-datepicker-calendar").hide();
      }
    }
  })
});

谢谢！

编辑看到回复后...

我在我的代码中添加了类似的内容，但什么也没发生...

$(function() {
  $('#MyMonth').datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    maxDate: +0,
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }

      if (isDonePressed()) {
        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)).trigger('change');

        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    beforeShow: function(input, inst) {
      $('.ui-datepicker-calendar').removeClass();
    }
  })

我注意到 .ui-datepicker-calendar 在 HTML 中是这样定义的..

表 class=ui-datepicker-日历

【问题讨论】：

你试过“#MyMonth .ui-datepicker-calendar”作为选择器吗？似乎这会将范围缩小到您想要的范围。
是的，我也试过了，它隐藏了两个日期选择器上的所有内容:(
How to add a custom class to my JQuery UI Datepicker的可能重复
嗨 Gavriel，不太确定如何将我的问题与您提供的问题联系起来。你能给我一些指示吗？谢谢！

标签： javascript jquery html css datepicker

【解决方案1】：

使用选择器 #id .datepickerClass 将不起作用，因为 datepicker div 是在输入之外创建的。您必须使用 beforeShow 为日历 div 设置一个类：

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass(function() {
           return $('input').get(0).id; 
       });
       $('#ui-datepicker-div').addClass(this.id);
   }
});

看看这个post

【讨论】：