Question

我在使用简单导航动态更改日期时更新数据属性时遇到一些问题：

这是html：

<button id="prev" data-date="2016, 04, 10">Previous</button>
<button id="next" data-date="2016, 04, 03">Next</button>

这里是javascript：

    function addDays(noOfDays, date) {
        var origTimezoneOffset = date.getTimezoneOffset();
        date = new Date(date.getTime() + (noOfDays * (1000 * 60 * 60 * 24)));
        var offsetDiff = (date.getTimezoneOffset() - origTimezoneOffset) * 60 * 1000;
        date = new Date(date.getTime() + offsetDiff);

        var month = (date.getMonth() + 1);
        var day = (date.getDate());
        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }
        var formatted = date.getFullYear() + ', ' + month + ', ' + day;
        return formatted;
    }

这是onclick事件：

    $("#prev, #next").on('click', function() {
        var string = $(this).attr('data-date');

        if ($(this).attr('id') === "next") {
            $(this).attr("data-date", addDays(7, new Date(string)));
            $("#prev").attr('data-date', addDays(-7, new Date(string)));
        } else {
            $(this).attr('data-date', addDays(-7, new Date(string)));
            $("#next").attr('data-date', addDays(7, new Date(string)));
        }
    });

在FF和Chrome中，一切都运行得很好，但是IE和Safari会回归 NaN，NaN，NaN

我也创建了jsbin：https://jsbin.com/puvakivika/edit?html,js,output

Answer 1

根据Date format您需要将字符串“2016,04,10”转换为“2016/04/10”才能继续进行。

有关日期格式的详细信息，请参阅Parse

在您的情况下，您需要使用简单的字符串替换：.replace（/，/ g，' - '）

对于数据属性，而不是使用.attr使用.data( key, value )

function addDays(noOfDays, date) {
  var origTimezoneOffset = date.getTimezoneOffset();
  date = new Date(date.getTime() + (noOfDays * (1000 * 60 * 60 * 24)));
  var offsetDiff = (date.getTimezoneOffset() - origTimezoneOffset) * 60 * 1000;
  date = new Date(date.getTime() + offsetDiff);

  var month = (date.getMonth() + 1);
  var day = (date.getDate());
  if (month < 10) {
    month = '0' + month;
  }
  if (day < 10) {
    day = '0' + day;
  }
  var formatted = date.getFullYear() + ', ' + month + ', ' + day;
  return formatted;
}

$(function () {
  $("#prev, #next").on('click', function(e) {
    var string = $(this).attr('data-date').replace(/, /g, '-');

    if ($(this).attr('id') === "next") {
      $(this).attr("data-date", addDays(7, new Date(string)));
      $("#prev").attr('data-date', addDays(-7, new Date(string)));
    } else {
      $(this).attr('data-date', addDays(-7, new Date(string)));
      $("#next").attr('data-date', addDays(7, new Date(string)));
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<button id="prev" data-date="2016, 04, 10">Previous</button>
<button id="next" data-date="2016, 04, 03">Next</button>

jQuery通过导航添加当前日期的减法日期

1 个答案: