如何在 jQuery 中突出显示日期？

Posted 2023-05-08

【中文标题】如何在 jQuery 中突出显示日期？

【英文标题】：How can highlight a date in jQuery?

【发布时间】：2018-07-06 16:11:17

【问题描述】：

我无法动态突出显示日历中的日期，如果我这样做，只会突出显示静态日期：

eventDates[new Date('01/09/2018')] = new Date('01/09/2018')

这是我的代码：

$(function() 
  // An array of dates
  var eventDates = [];
  $.ajax(
    type: "GET",
    url: "@Url.Action("
    GetEvents ", "
    Home ")",
    dataType: "json",
    data: "",
    success: function(data) 
      $.each(data, function(i, val) 
        var dd = CTD(val.Date); //CTD means convert into date 
        eventDates[i] = dd;
      );
    
  );
  // convert in date
  function CTD(d) 
    var date = new Date(parseInt(d.substr(6)));
    var month = date.getMonth() + 1;
    return date.getDate() + "/" + month + "/" + date.getFullYear();
  

  //eventDates[new Date('01/09/2018')] = new Date('01/09/2018');

  // datepicker
  $('#datepicker').datepicker(
    beforeShowDay: function(date) 
      var highlight = eventDates[date];
      if (highlight) 
        return [true, "event", 'Tooltip text'];
       else 
        return [true, '', ''];
      
    
  );
);

【问题讨论】：

您使用什么语言，C# 还是 VB？您的视图使用什么语言，Razor 还是 ASPX？

asp.net mvc Razor (C#) 使用

【参考方案1】：

然后在DatePicker 中，您在数组索引中进行搜索，因此您将找不到日期。要查找您需要使用indexOf() 方法的日期，并且您需要将DatePicker 日期格式化为您保存在数组中的相同格式：

var month = date.getMonth() + 1;
date = date.getDate() + "/" + month + "/" + date.getFullYear();
var highlight = eventDates.indexOf(date);

您无需重复代码来格式化日期，而是将格式化代码从 CTD() 函数中提取到一个新函数中：

// convert in date
function CTD(d) 
  var date = new Date(parseInt(d.substr(6)));
  return FD(date);

// format date
function FD(d) 
  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();

最后，您要确保 DatePicker 的代码仅在 Ajax 结果返回后运行，因此放入一个函数并从 Ajax 的 success 调用它：

$(function() 
  $.ajax(
    type: "GET",
    url: "@Url.Action("GetEvents", "Home")",
    dataType: "json",
    data: "",
    success: function(data) 
      var eventDates = []; //An array of dates
      $.each(data, function(i, val) 
        eventDates[i] = CTD(val.Date); //CTD means convert into date 
      );
      HighlighEvents(eventDates);
    
  );
  // convert in date
  function CTD(d) 
    var date = new Date(parseInt(d.substr(6)));
    return FD(date);
  
  // format date
  function FD(d) 
    return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
  
  // datepicker
  function HighlighEvents(eventDates) 
    $('#datepicker').datepicker(
      beforeShowDay: function(date) 
        var highlight = eventDates.indexOf(FD(date));
        if (highlight > -1) 
          return [true, "event", 'Tooltip text'];
         else 
          return [true, '', ''];
        
      
    );
  
);

【讨论】：

它没有使用完整，我没有使用任何输入文件

对不起，我不明白你的评论。你说你的日期来自数据库。那将在控制器中，那么您如何将其从控制器发送到视图？如果您使用该模型，我举了一个例子。如果您改用DataView，代码将类似。如果您需要帮助，请在问题中发布您的代码。

数据以 json 形式从控制器发送，例如 public JsonResult GetEvents() var events = db.Events.ToList();返回新的 JsonResult 数据 = 事件，JsonRequestBehavior = JsonRequestBehavior.AllowGet ;

糟糕！我忘记更改您的原始状态if (highlight)。应该是if (highlight > -1)。请参阅我的更新答案。

并为多个 Highlight 更新 enventDates[i] 而不是 eventDates[1]