如何显示带有突出显示日期的 jquery 日历并禁止单击（只读）答案

【问题标题】：How can I display a jquery calendar with highlight days and prohibit clicking (read only)如何显示带有突出显示日期的 jquery 日历并禁止单击（只读）
【发布时间】：2020-08-30 16:37:44
【问题描述】：

我使用 Jquery 日历来显示每日房间容量。到目前为止，它工作正常。

现在我只想在我的开始屏幕上显示这个日历（只读模式）。不应标记日期，因为没有任何功能，如果标记了日期（蓝色），用户可能会感到困惑，但没有任何反应。

我已经尝试了所有here，但要么什么都没有发生，要么日历显示没有我的亮点。

如何显示我的亮点天数并禁止点击？

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

function highlightDays(date) {
  var res = [true, ""];
  
  $.each(dates, function(k, v) {
    if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
      res = [true, v.type, v.note];
    }
  });
  
  return res;
}

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays,
    onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)}
  });

});

td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>

【问题讨论】：

标签： jquery jquery-ui datepicker

【解决方案1】：

有一些 CSS - 如果您甚至不希望它们更改月份，请删除 tbody

#datepicker tbody [data-event=click] { pointer-events: none; }

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

function highlightDays(date) {
  var res = [true, ""];
  
  $.each(dates, function(k, v) {
    if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
      res = [true, v.type, v.note];
    }
  });
  
  return res;
}

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays,
    onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)},
    onSelect: function() { return false }
  });

});

td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

#datepicker tbody [data-event=click] { pointer-events: none; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>

【讨论】：