Java 脚本日期范围选择器 select 仅过去 24 小时

Question

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

我已经使用日期范围选择器 (https://www.daterangepicker.com) 来帮助我 select 用户可以选择显示数据的日期，但我现在想让它在过去 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 标记的 link。

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

我用

start._d.getTime()

和

end._d.getTime()

找到我的时间select离子范围，这些给我时间的纪元。

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

我试过在区域设置部分编辑时间格式，但这总是给我错误。

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

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

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

如果它有所不同，我会在我第一次加载页面时在 link 中加载最近 24 小时的图表，但是 URL 不为 JavaScript 并在脚本第一次运行时被重写 HTML.

希望这充分解释了我自己，任何想法都会有很大帮助。

Answer 1

给你：

$('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>

Java 脚本日期范围选择器 select 仅过去 24 小时

Java Script Date Range Picker select only last 24 Hours

javascript

date-range

daterangepicker