无法在日历中选择日期答案

【问题标题】：Unable to select date in calender无法在日历中选择日期
【发布时间】：2016-09-30 07:00:40
【问题描述】：

我正在使用 multiDatesPicker 作为日历，它与默认日历选项配合得很好。

在我的情况下，我将一个额外的 span 标签附加到日历日期，因此在附加 span 标签后，它不会在点击时选择日期。

这是我如何附加跨度标签

$(function() {
  $('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d"
  });
  $('.ui-state-default').prepend($('<span>A</span> <span>B</span>'));
});

Demo

【问题讨论】：

标签： javascript jquery html datepicker

【解决方案1】：

您有元素 <a class="ui-state-default">NUMBER</a>，其中 datepicker 脚本获取此标记的值，即 NUMBER。当您将 span 元素添加到 a 标签中时，内容变为无效数字，这就是为什么日期选择在点击时不起作用的原因。作为解决方案，您可以使用 css 例如：

.ui-state-default::before { content: 'A B '; }

【讨论】：

每个字母都会有 b 类变化，所以我需要在 html 标记中使用它们
我明白，但这是 datepicker 脚本的工作方式，它要求 a 标签的 innerHTML 是有效数字，你不能将 span 元素添加到这个标签中，因为它会被破坏。

【解决方案2】：

您可以避免使用prepend($('A B'))。另一件事，你为什么要使用，你可以选择多日期而不使用它。

$(function() {
  $('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d"
  });
  $('.ui-state-default');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>

<div id="page">
  <div id="demos">
    <ul id="demos-list">					
      <li class="demo">
        <div id="custom-date-format" class="box"></div>
      </li>
    </ul>
  </div>
</div>

【讨论】：