日期范围选择器为 24 小时范围创建了错误的时间值

Question

DateRangePicker (http://www.daterangepicker.com/) 创建了错误的值。例如，当我 select 值 13:00 它在输入中显示为 01:00

我已将 timePicker24Hour 设置为 true，所以我真的不知道问题是什么

网页代码

$(function() {
  $('input[class*="datetimes"]').daterangepicker({
    autoUpdateInput: true,
    singleDatePicker: true,
    timePicker: true,
    minYear: 1901,
    timePicker24Hour: true,
    timePickerIncrement: 5,
    maxYear: parseInt(moment().format('YYYY'), 10),
    locale: {
      format: 'YYYY-MM-DD hh:mm'
    },
    opens: "center"
  });
});

<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" />


<input class="form-control datetimes" type="text" name="end_time" id="end_time" />

有没有人遇到过这个错误或者我配置有误？

Answer 1

您的日期格式需要大写 HH（24 小时格式）

$(function() {
  $('input[class*="datetimes"]').daterangepicker({
    autoUpdateInput: true,
    singleDatePicker: true,
    timePicker: true,
    minYear: 1901,
    timePicker24Hour: true,
    timePickerIncrement: 5,
    maxYear: parseInt(moment().format('YYYY'),10),
    locale: {
        format: 'YYYY-MM-DD HH:mm'
      },
    opens: "center"
  });
});

<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" />

<input class="form-control datetimes" type="text" name="end_time" id="end_time" />

Answer 2

您的问题是您（通过区域设置）输出回输入的格式是格式 hh:mm，即 12 小时格式 (mm)。您想要 HH，使整个格式成为 YYYY-MM-DD HH:mm。通过像您一样执行 timePicker24Hour: true 将日期选择器本身设置为 24 小时格式。

    $(function() {
      $('input[class*="datetimes"]').daterangepicker({
        autoUpdateInput: true,
        singleDatePicker: true,
        timePicker: true,
        minYear: 1901,
        timePicker24Hour: true,
        timePickerIncrement: 5,
        maxYear: parseInt(moment().format('YYYY'),10),
        locale: {
            format: 'YYYY-MM-DD HH:mm'
          },
        opens: "center"
      });
    });

<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" />

<input class="form-control datetimes" type="text" name="end_time" id="end_time" />

日期范围选择器为 24 小时范围创建了错误的时间值

Date range picker creating wrong time values for 24 hour range

javascript

php

jquery

daterangepicker