如何显示一个 jquery 日历，突出显示日期并禁止点击（只读）

Question

我使用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>

Answer 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>

如何显示一个 jquery 日历，突出显示日期并禁止点击（只读）

How can I display a jquery calendar with highlight days and prohibit clicking (read only)

jquery

jquery-ui

datepicker