CODEWITHSUNDEEP
javascriptphpjquerydaterangepicker
Neyert
Neyert

Reputation: 3

Date range picker creating wrong time values for 24 hour range

DateRangePicker (http://www.daterangepicker.com/) is creating wrong values. When, for example, I select value 13:00 it shows up in input that it's 01:00

I have enabled timePicker24Hour to true so I dont really know what is the problem

Web page code

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

Does anyone have had this bug or I have configured something wrong?

Upvotes: 0

Views: 1807

Answers (2)

Qirel
Qirel

Reputation: 26450

Your issue is that the format you're outputting back to the input (through the locale) is of the format hh:mm, which is the 12-hour format (mm). You want HH instead, making the entire format YYYY-MM-DD HH:mm. The datepicker itself is set to 24-hour format by doing timePicker24Hour: true as you were doing. 

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

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

You need uppercase HH(24h format) to your date format

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

Upvotes: 1

Related Questions