Question

我正在尝试使日历正常工作，我试图使它出现在网站上突出显示的计算机上，我尝试了多种操作，但是我无法使其正常工作，我知道它会继续工作涉及一些Javascript或Jquery。但如果可能，则无需任何插件。我有一个代码，但是我认为在这种情况下不会有太大帮助...

编辑：

整个代码：http://jsfiddle.net/gacwvtjx/ 新代码：http://jsfiddle.net/gacwvtjx/5/

我已经尝试过：

var date = new Date(),
year = date.getFullYear(),
month = date.getMonth(),
day = date.getUTCDate(),
months = [ "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
document.getElementById('day').classList.add("active");
document.getElementById('month').innerHTML = months[month];
document.getElementById('year').innerHTML = year;

它并没有像预期的那样正常工作，因为我在许多div上都使用了相同的id来使其按我的想法工作，但是无论如何都无法工作。

编辑：

$(document).ready(function(){

$('ul.tabs li').click(function(){

    var $parent = $(this).parent();

    var tab_id = $(this).attr('data-tab');

    $parent.find('li').removeClass('current');
    $parent.parent().find('.tab-content').removeClass('current');

    $(this).addClass('current');
    $parent.parent().find("#"+tab_id).addClass('current');
});
var $parent = $(this).parent();

var date_id = $(this).attr('data-day');
    const CURRENT_DAY = (new Date).getDate()
$parent.parent().find("#"+date_id+CURRENT_DAY).addClass('active');
});

Answer 1

new Date()

返回您当前的本地日期。这是您需要的吗？

我还提供了一个生成日历的示例，其中突出显示了当日。

如果需要在已渲染的日历上突出显示日期，则可以使用querySelector或childNodes的组合来检索正确的元素以根据本地日期突出显示。但是我不知道日历的HTML是如何构建的，因此我无法更准确地告诉您。

const now = new Date;

window.addEventListener('load', function () {
  generateCalendar(new Date());
});


function generateCalendar(date)
{
  const monthStartsAt = date.getDay() - (date.getDate()-1) % 7;
  const dayCount = getDaysInMonth(date.getYear(), date.getMonth());
  const emptyStart = (monthStartsAt + 6) % 7;
  const weeks = Math.ceil((emptyStart + dayCount) / 7);
  
  const calendar = document.querySelector(".calendar");
  
  let day = 1;
  
  for(var w = 0; w < weeks; w++)
  {
    const wElem = document.createElement("div");
    wElem.classList.add("week");
    
    if(w == 0)
    {
      for(var i = 0; i < emptyStart; i++)
      {
        const dElem = document.createElement("div");
        dElem.classList.add("day");
        dElem.classList.add("empty");
        wElem.appendChild(dElem);
      }
    }
      
    do
    {
      const dElem = document.createElement("div");
      dElem.classList.add("day");
      
      if(date.getDate() == day)
        dElem.classList.add("today");
      
      dElem.innerHTML = day;
      wElem.appendChild(dElem);
      day++;
    }
    while((day + emptyStart) % 7 != 1 && day <= dayCount);
    
    calendar.appendChild(wElem);
  }
}

function getDaysInMonth(year, month)
{
  return new Date(year, month+1, 0).getDate();
}

.calendar .week
{
  border-bottom: 1px solid rgb(200, 200, 200);
  width: 210px;
  display: flex;
}

.calendar .day
{
  text-align: center;
  width: 30px;
}

.calendar .day.today
{
  background-color: rgb(40, 200, 40);
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="calendar">
    </div>
  </body>
</html>

Answer 2

实际上您的代码中有几个问题：

您已经硬编码了整个日历。这绝对是错误的，在年底之后将无法正常工作。请参阅我当前答案中的代码-它从代码生成日历div。我放在那里的函数接受日期，并为给定日期所在的月份生成日历。切换月份将只是清除.calendar div并在另一个月份再次调用该函数。
所有标签的ID为“ day”。 ID应该是唯一的，因此您所做的是非法的，将无法正常工作。这些ID可能是“ date_2018-10-10”，然后您就可以正确格式化日期并从中形成ID。

警告：请记住，Javascript从0开始计算月份和工作日。因此，月份0是1月，月份11是12月，工作日0是星期日，工作日6是星期六。

根据PC上的日期，用javascript突出显示日历上的日期

2 个答案: