date range picker not working properly

Question

I am trying to add daterangepicker to my page. It should be very simple but it is not working. It gives output Invalid date when I select Today, 7 Days or other range buttons. Please check my following code

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="moment.js"></script>
  <script type="text/javascript" src="daterangepicker.js"></script>

<div class="row">
      <div class="col-md-4 col-md-offset-2 demo">
        <h4>Your Date Range Picker</h4>
        <input type="text" id="config-demo" class="form-control">
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
      </div>
</div>

SCRIPT

<script type="text/javascript">

$('#config-demo').daterangepicker({
    "ranges": {
    "Today": [
        "2015-10-02T11:06:15.319Z",
        "2015-10-02T11:06:15.319Z"
    ],
    "Yesterday": [
        "2015-10-01T11:06:15.319Z",
        "2015-10-01T11:06:15.319Z"
    ],
    "Last 7 Days": [
        "2015-09-26T11:06:15.319Z",
        "2015-10-02T11:06:15.319Z"
    ],
    "Last 30 Days": [
        "2015-09-03T11:06:15.319Z",
        "2015-10-02T11:06:15.319Z"
    ],
    "This Month": [
        "2015-09-30T19:00:00.000Z",
        "2015-10-31T18:59:59.999Z"
    ],
    "Last Month": [
        "2015-08-31T19:00:00.000Z",
        "2015-09-30T18:59:59.999Z"
    ]
},
"locale": {
    "format": "MM/DD/YYYY",
    "separator": " - ",
    "applyLabel": "Apply",
    "cancelLabel": "Cancel",
    "fromLabel": "From",
    "toLabel": "To",
    "customRangeLabel": "Custom",
    "daysOfWeek": [
        "Su",
        "Mo",
        "Tu",
        "We",
        "Th",
        "Fr",
        "Sa"
    ],
    "monthNames": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    "firstDay": 1
},
"linkedCalendars": false,
"startDate": "09/26/2015",
"endDate": "10/02/2015",
"opens": "center"
}, 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>

Answer 1

Use momentjs to convert the hardcoded date strings to a format daterangepicker can comprehend :

...
"ranges": {
    "Today": [
        moment("2015-10-02T11:06:15.319Z"),
        moment("2015-10-02T11:06:15.319Z")
    ],
    "Yesterday": [
        moment("2015-10-01T11:06:15.319Z"),
        moment("2015-10-01T11:06:15.319Z")
    ],
    "Last 7 Days": [
        moment("2015-09-26T11:06:15.319Z"),
        moment("2015-10-02T11:06:15.319Z")
    ],
    "Last 30 Days": [
        moment("2015-09-03T11:06:15.319Z"),
        moment("2015-10-02T11:06:15.319Z")
    ],
    "This Month": [
        moment("2015-09-30T19:00:00.000Z"),
        moment("2015-10-31T18:59:59.999Z")
    ],
    "Last Month": [
        moment("2015-08-31T19:00:00.000Z"),
        moment("2015-09-30T18:59:59.999Z")
    ]
},
...

Then your code works -> http://jsfiddle.net/jz4tpbrh/

Also corrected the log message

console.log("New date range selected: " + start.format('MM-DD-YYYY') + " to " + end.format('MM-DD-YYYY') + " (predefined range: " + label + ")");