时间戳

首页 > 解决方案 > Java Script 日期范围选择器仅选择过去 24 小时

javascript - Java Script 日期范围选择器仅选择过去 24 小时

问题描述

我想知道是否有人可以解释我需要在日期范围选择器中用于小时减法的正确格式，或者是否可以这样做。

我使用了日期范围选择器 ( https://www.daterangepicker.com ) 来帮助我选择用户可以选择的日期来显示数据，但我现在想让它在过去 24 小时内工作。

我可以用这个当前代码做到这一点：

  $('input[name="datetimes"]').daterangepicker({
    opens: 'left',
    timePicker: false,
    showDropdowns: true,
    opens: 'left',
    timePicker24Hour: true,
    minYear:  new Date().getFullYear() - 5,
    maxDate: new Date(),
    minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 5)),
        ranges: {
        'Today': [moment(), moment()],
        'Last 24 Hours': [moment().subtract(24, 'hours').format("YYYY,MM-DD"), moment().subtract(24, 'hours').format("YYYY,MM-DD")],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'This Month So Far': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        'This Year So Far': [moment().startOf('year'), moment().endOf('year')],
        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
    },
    locale: {
      format: 'DD/MM/YYYY'
    }
  }, function(start, end) {
    console.log(start._d.getTime()) //From
    console.log(end._d.getTime()) // To

请注意我必须减去 24 小时并格式化日期才能使用此代码，但其他“全天”选项不需要这个。

但是，当我选择“过去 24 小时”时，我会在日期范围选择器框中看到“无效日期 - 无效日期”。代码完美运行（除了显示的文本），我使用该函数更新 iframe 中带有元素 ID 标记的链接。

我想知道为什么代码可以更新我的链接，但在日期选择器框中显示错误的值。

我用

start._d.getTime()

和

end._d.getTime()

为了找到我的时间选择范围，这些给了我时代的时间。

“昨天”选项减去一天，但不是从今天的当前时间到 24 小时前的时间，而是从午夜到午夜。

我尝试在语言环境部分编辑时间格式，但这总是给我错误。

理想情况下，我希望标签或框在选择“过去 24 小时”选项时显示“过去 24 小时”，但我更感兴趣的是它为什么这样做并且仍然有效。

当我测试它时，我在浏览器控制台中得到一个时间变量的 NaN，所以我更加困惑。

我正在考虑使用 If 语句来检查时间值是否为 NaN 以及是否以某种方式在选择框中显示更好的“过去 24 小时”文本，让其余的过程按原样发生，因为它以某种方式现在工作。

如果有所不同，我会在第一次加载页面时在链接中加载最后 24 小时的图表，但是 JavaScript 不知道 URL，并且在脚本第一次在 HTML 中运行时重写。

希望这能完全解释我自己，任何想法都会有很大帮助。

标签： javascriptdate-rangedaterangepicker

解决方案

干得好：

$('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    timePicker24Hour: true,
    showDropdowns: true,
    startDate: moment().subtract(6, 'days').startOf('day'),
    endDate: moment(),
    minYear: moment().subtract(5, 'year').year(),
    minDate: moment().subtract(5, 'year'),
    maxDate: moment(),
    ranges: {
      'Today': [moment().startOf('day'), moment()],
      'Last 24 Hours': [moment().subtract(24, 'hour'), moment()],
      'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
      'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment()],
      'This Month So Far': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      'This Year So Far': [moment().startOf('year'), moment().endOf('year')],
      'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
    },
    locale: {
      format: 'DD/MM/YYYY HH:mm'
    }
  },
  function(start, end) {
    console.log(start.toString()) //From
    console.log(end.toString()) // To);
  });
#demo {
  width: 250px;
}
<html>

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>

<body>
  <input id="demo" type="text" name="datetimes" />
</body>

</html>

推荐阅读