Date Range Picker (Angularjs) (Broken)
by merganser
HTML
<script src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<input type="text" name="daterange" value="" />
JavaScript
$(function() {
$('input[name="daterange"]').daterangepicker({
"autoApply": true,
"ranges": {
"Today": [
"2017-03-03T17:14:32.085Z",
"2017-03-03T17:14:32.085Z"
],
"Yesterday": [
"2017-03-02T17:14:32.085Z",
"2017-03-02T17:14:32.085Z"
],
"Last 7 Days": [
"2017-02-25T17:14:32.085Z",
"2017-03-03T17:14:32.085Z"
],
"Last 30 Days": [
"2017-02-02T17:14:32.085Z",
"2017-03-03T17:14:32.085Z"
],
"This Month": [
"2017-03-01T05:00:00.000Z",
"2017-04-01T03:59:59.999Z"
],
"Last Month": [
"2017-02-01T05:00:00.000Z",
"2017-03-01T04:59:59.999Z"
]
},
"locale": {
"format": "MM/DD/YYYY",
"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
},
"alwaysShowCalendars": true,
"startDate": "02/25/2017",
"endDate": "03/03/2017"
}, function(start, end, label) {
console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
});