CODEWITHSUNDEEP
momentjsdaterangepickerbootstrap-daterangepicker
lovemyjob
lovemyjob

Reputation: 579

Moment.js / Date Range picker hours conversion can't pick more than 23 hours ahead

When I change from AM/PM to 24 clock the hour picker only allows to go 23 hrs ahead. Is this a common error with Date range picker or moment.js conversion problem?

I will upload my picture in case moment.js takes time from my servers? And can't go beyond 23 hrs...

enter image description here

Also please see codepen with my code.

"setStartDate": [moment().startOf('day')],
"setEndDate": [moment()]

https://codepen.io/anon/pen/WMOmOO

Upvotes: 0

Views: 2885

Answers (1)

VincenzoC
VincenzoC

Reputation: 31482

Pay attention to the format option, you have to use valid moment tokens, MM stands for month while lowercase mm stands for minutes, SS stands for fractional seconds, use lowercase ss for secods, see moment docs for further reference.

Moreover startDate and endDate options accept Date object, moment object or string, you are passing an array, that is why you are getting Invalid Date.

Here a live snippet:

$('#demo').daterangepicker({
    "timePicker": true,
    "timePicker24Hour": true,
    "autoApply": true,
    "locale": {
        "format": "DD/MM/YYYY HH:mm:ss",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "firstDay": 1
    },
    "startDate": moment().startOf('day'),
    "endDate": moment()
}, function(start, end, label) {
  console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" id="demo" style="width: 300px;"></input>

Upvotes: 2

Related Questions