3

Я пытаюсь добавить daterangepicker на свою страницу. Это должно быть очень просто, но оно не работает. Он выводит недопустимую дату, когда я выбираю «Сегодня», «7 дней» или другие кнопки диапазона. Пожалуйста, проверьте мой следующий кодвыбор диапазона даты не работает

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

ответ

4

Используйте momentjs, чтобы преобразовать жестко закодированные строки даты в формате daterangepicker можно понять:

... 
"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") 
    ] 
}, 
... 

Тогда ваш код работает ->http://jsfiddle.net/jz4tpbrh/

Также исправлен сообщение журнала

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

большой. спасибо, что это была проблема. –

Смежные вопросы