Question

请帮助。我在JQuery中使用日历功能遇到此问题。我使用json编码从数据库中检索日期数组，然后尝试在日历中突出显示此日期，但不起作用。

我试图格式化dates数组，作为我从网页上获取的示例（这就是为什么我重新组织day-month-year的顺序并从day和time变量中提取零的原因）我的代码：

    <script type='text/javascript'>
      $(document).ready(function(){
         //global variable. Will store scheduled tours dates
        highlightDates = [];
        $.getJSON('../mod/calendar.php',function(data){
          window.console && console.log(data);
          window.console && console.log(data.length);
          for(var i = 0; i < data.length; i++){
            //extracting year, month and day from JSON string
            var yearDate = [];
            var monthDate = [];
            var dayDate = [];
            yearDate.push(data[i].tour_date.substr(0,4));
            monthDate.push(data[i].tour_date.substr(5,2));
            //Erase the '0' at left of integer
            var monthDate = parseInt(monthDate, 10);
            dayDate.push(data[i].tour_date.substr(8,9));
            //Erase the '0' at left of integer
            var dayDate = parseInt(dayDate, 10);
            //Converting to dates string
            highlightDates.push(dayDate+'-'+monthDate+'-'+yearDate);
          }
            window.console && console.log(highlightDates);
        });
      });

$.noConflict();
//Highlight dates which has tours scheduled using JQuery Calendar (datepicker)
jQuery(document).ready(function($){
  $('#datepicker').datepicker({
    beforeShowDay: function(date){
      var month = date.getMonth()+1;
      var year = date.getFullYear();
      var day = date.getDate();

      // Change format of date
      var newdate = day+"-"+month+'-'+year;

      // Set tooltip text when mouse over date
      var tooltip_text = "New event on " + newdate;
      window.console && console.log(highlightDates);

      // Check date in Array
      if(jQuery.inArray(newdate, highlightDates) != -1){
        return [true, "highlight", tooltip_text ];
      }
    return [true];
    }
  });
});
  </script>
  <style>
    .highlight {
      background: #29f274 !important;
      color: #ffffff !important;
    }
  </style>

这是控制台输出：

，这是使用测试数组的控制台输出：

Answer 1

好吧，我解决了我的问题，我想分享一下它是否对其他人有用...

在我的情况下，最主要的是从MySQL数据库检索的日期以yyyy-mm-dd的形式出现，而我需要以dd-mm-yyyy的形式出现（无论您可以在Daypicker插件）

因此，对于从数据库中检索到的数据，我有：

jQuery(document).ready(function($){
  allDates = [];//global variable. Will store scheduled art dates
  $.getJSON('../mod/calendar.php',function(data){
    window.console && console.log(data);
    for(var i = 0; i < data.length; i++){
       //extracting year, month and day from JSON string
       var yearDate = [];
       var monthDate = [];
       var dayDate = [];
       yearDate.push(data[i].art_date.substr(0,4));
       monthDate.push(data[i].art_date.substr(5,2));
       //Erase the '0' at left of integer
       var monthDate = parseInt(monthDate, 10);
       dayDate.push(data[i].artdate.substr(8,9));
       //Erase the '0' at left of integer
       var dayDate = parseInt(dayDate, 10);
       //Converting to dates string
       allDates.push(yearDate+'-'+monthDate+'-'+dayDate);
        window.console && console.log(allDates);
    }
//And for the calendar I have

  $('#datepicker').datepicker({
      dateFormat: "yyyy-mm-dd",
      beforeShowDay: function(date) {
        var month = date.getMonth()+1;
        var year = date.getFullYear();
        var day = date.getDate();
        // Change format of date
        var search = year+"-"+month+'-'+day;
        window.console && console.log(search);
        for(var i = 0; i < allDates.length; i++){
          window.console && console.log(allDates[i]);
          if(search == allDates[i]){
            return [true, 'highlight', 'Arts scheduled'];
          }
        }
        return [true, '', ''];
      }
    });
  });
});

希望这对某人有帮助！

jQuery日历和JS数组

1 个答案: