日期范围选择器插件日期格式问题

Question

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.

Answer 1

Just wrap your start and end values by moment, then format it to MM/DD/YYYY :

function cb(start, end) {
    $('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY'));
}

Take a look on a Working fiddle: https://jsfiddle.net/6w2m83qa/

Note that when you wrap in moment, it try to understand what format you are using. MM/DD/YYYY runs fine, Unix timestamp too.

If your format wasn't any of the supported formats, eg. DD/MM/YYYY , you should need to specify the input format.

Answer 2

Replace your call back function with this

function cb(start, end) {
    $('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY'));
}

Its just you have to change the format.

Hope it helps.

Answer 3

As you can see in the config documentation your cb function is of type:

function(startDate, endDate, label) {

It's a callback function triggered from daterangepicker when the user chooses new dates.

The first two arguments are moment objects.

So, your function becomes:

function cb(start, end) {
    $('#daterange span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
}

and you can call it at dom ready as:

cb(moment(start), moment(end));

The updated fiddle