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

【问题标题】：Date Range Picker Plugin Date Format Issue日期范围选择器插件日期格式问题
【发布时间】：2017-04-21 07:59:58
【问题描述】：

我遇到了日期范围选择器插件（通过 moment.js）将我的日期格式从 (MM/DD/YYYY) 转换为 Unix 日期格式的问题。

为了重现问题，我创建了一个 Fiddle。在小提琴中，单击日期范围，将显示选择器。在选择器中，选择一个日期范围并单击“应用”。执行此操作时，您会注意到日期范围格式现在是 Unix 格式。

点击应用时如何将日期格式转换回“MM/DD/YYYY”？

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;
        }
    });
});

小提琴 https://jsfiddle.net/coryspi/oka1noht/

提前感谢您的帮助。

【问题讨论】：

谢谢大家。我明白我哪里出错了，我很感激。所有 3 个答案都产生了预期的结果，但我只能接受一个。

标签： javascript jquery date bootstrap-daterangepicker

【解决方案1】：

只需按时刻包装您的开始值和结束值，然后将其格式化为MM/DD/YYYY：

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

看看一个工作小提琴：https://jsfiddle.net/6w2m83qa/

请注意，当您换行时，它会尝试了解您使用的格式。 MM/DD/YYYY 运行良好，Unix timestamp 也是。

如果您的格式不是任何受支持的格式，例如。 DD/MM/YYYY，需要指定输入格式。

【讨论】：

【解决方案2】：

用这个替换你的回调函数

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

只是你必须改变格式。

希望对你有帮助。

【讨论】：

【解决方案3】：

正如您在 config documentation 中看到的，您的 cb 函数属于：

function(startDate, endDate, label) {

当用户选择新日期时，从 daterangepicker 触发的回调函数。

前两个参数是矩对象。

所以，你的函数变成：

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

你可以在 dom ready 中调用它：

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

更新后的fiddle

【讨论】：