I'm having an issue where the Date Range Picker plugin (via moment.js) is converting my date format from (MM/DD/YYYY) to the Unix date format.
To recreate the issue, I created a Fiddle. In the Fiddle, click on the date range and the picker will display. In the picker, select a date range and click "apply". When you do this, you will note that the date range format is now in the Unix format.
How do I convert the date format back to 'MM/DD/YYYY' when I click apply?
HTML
<div id="daterange"><span></span></div>
JQUERY
$(function() {
var listItem, applyClicked = false,
start = '10/10/2016',
end = '12/05/2016';
function cb(start, end) {
$('#daterange span').html(start + ' - ' + end);
}
//var num = $("#daterange").data("datepicker");
//cb(moment().subtract(num, 'days'), moment());
$('#daterange').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'MM/DD/YYYY'
},
opens: "left",
startDate: start,
endDate: end,
maxDate: moment().endOf("day"),
alwaysShowCalendars: true,
autoUpdateInput: true
}, cb);
cb(start, end);
// Dont close daterangepicker immediately when predefined range selected
$(".ranges ul li").click(function() {
listItem = $(this).text();
});
$(".range_inputs").click(function() {
applyClicked = true;
});
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
//var test = moment.unix(startDate).format("MM/DD/YYYY");
//$('#daterange span').html(test + ' - ' + end);
if (listItem != "Custom Range" && !applyClicked) {
picker.show();
applyClicked = false;
}
});
});
Fiddle https://jsfiddle.net/coryspi/oka1noht/
Thanks in advance for your help.