使用 beforeShow() 在日期选择器中添加类答案

【问题标题】：Add class in datepicker using beforeShow()使用 beforeShow() 在日期选择器中添加类
【发布时间】：2017-04-20 07:59:32
【问题描述】：

我正在尝试使用此函数在所选日期元素上添加一个类：

beforeShow:function(){ $(".ui-datepicker-current-day").addClass('testX') }

我有两个问题。首先，没有添加这样的类。其次，日志显示了一个奇怪的行为。我打开 datePicker 的前两次，hasClass() 返回 false，但第三次显示 true（而 testX 类仍未显示在 html 中）。

 $(function() {
  $( "#datepicker" ).datepicker({
    beforeShow:function(){     
      console.log('================================================');
      console.log($( ".ui-datepicker-current-day" ).hasClass('testX'));
      $( ".ui-datepicker-current-day" ).addClass('testX');
      console.log($( ".ui-datepicker-current-day" ).hasClass('testX'));
    }
  });
});

.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ddd;
}
.testX{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
<form>
Date:
<input id="datepicker">
</form>
</div>

【问题讨论】：

为什么不直接使用这个.ui-datepicker-today{ background-color:red; }
我想突出显示用户选择的日期，而不是当前（今天）日期（尽管 jQuery 将所选日期命名为 current 和 today 肯定会产生误导）当天。

标签： javascript jquery css jquery-ui datepicker

【解决方案1】：

$("#datepicker").datepicker({
            afterShow: function () {
                console.log('================================================');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
                $(".ui-datepicker-current-day").addClass('testX');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
            }
        });

以上代码已更新，您可以在 #datetimepicker 上使用 onfous 事件。下面给出的代码可能对您有所帮助。它对我有用。

  $(function () {

       $("#datepicker").focus(function(){
              console.log('================================================');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
                $(".ui-datepicker-current-day").addClass('testX');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));

         });

    });

【讨论】：

【解决方案2】：

试试这个代码

var selectedDay = new Date().getDate();
$(function() {
    $( "#datepicker" ).datepicker({
        onSelect: function(dateText, inst) {
            selectedDay = inst.selectedDay;
        },
        beforeShowDay: function (date) {
            if (date.getDate() == selectedDay && !$('#datepicker').val()=="") {
                return [true, "testX", ""]; 
            } else {
                return [true, ""]
            }
        }
    });
});

.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ddd;
}
.testX{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
<form>
Date:
<input id="datepicker">
</form>
</div>

希望对你有帮助

【讨论】：