Javascript 日期范围选择器仅选择过去 24 小时答案

【问题标题】：Java Script Date Range Picker select only last 24 HoursJavascript 日期范围选择器仅选择过去 24 小时
【发布时间】：2021-08-21 00:37:46
【问题描述】：

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

我使用了日期范围选择器 (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 小时”时，我会在日期范围选择器框中看到“无效日期 - 无效日期”。代码完美运行（除了显示的文本），我使用该函数更新带有元素 ID 标记的 iframe 中的链接。

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

我用

start._d.getTime()

和

end._d.getTime()

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

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

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

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

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

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

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

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

【问题讨论】：

改用'Last 24 Hours': [moment().subtract(24, 'hours'), moment()],。使用格式化将返回一个字符串而不是日期对象，因此返回无效日期和 NaN。我还应该注意，您需要有timePicker: true, 才能工作。
谢谢你这个作品，但现在它总是显示主要的大日历，而不是在第一次选择的范围内显示更小的更好看的下拉框，有什么想法吗？我想将您的答案标记为我的解决方案，如果您有时间，您能把它放在答案中吗？
这是一个工作示例：jsfiddle.net/f2049bnL
非常感谢您的帮助。如果你有时间请把它放在答案中，以便我选择它，再次感谢你的帮助。

标签： javascript date-range daterangepicker

【解决方案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>

【讨论】：

嗨蒂姆，想知道你是否可以再次指出我正确的方向。我正在尝试自动选择我的时间范围之一，因此当页面加载时，我看到“最近 7 天”已加载或选择。现在它只选择“今天”我已经尝试切换范围顺序但没有奏效它仍然选择“今天”有什么想法吗？
嘿@Spider999，只需设置startDate 和endDate 选项以匹配您的范围：startDate: moment().subtract(6, 'days').startOf('day'), endDate: moment(), 我还更新了上述答案以反映这一点。