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

Posted 2023-05-08

【中文标题】如何显示带有突出显示日期的 jquery 日历并禁止单击（只读）

【英文标题】：How can I display a jquery calendar with highlight days and prohibit clicking (read only)

【发布时间】：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>

【参考方案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>