日期范圍選擇器插件日期格式問題

Question

我遇到了一個問題，其中日期范圍選擇器插件（通過moment.js）將我的日期格式從（MM / DD / YYYY）轉換為Unix日期格式。

為了重現問題，我創建了一個小提琴。 在小提琴中，單擊日期范圍，然后將顯示選擇器。 在選擇器中，選擇一個日期范圍，然后單擊“應用”。 執行此操作時，您會注意到日期范圍格式現在為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/

在此先感謝您的幫助。

Answer 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 ，您需要指定輸入格式。

Answer 2

以此替換您的回叫功能

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

它只是您必須更改格式。

希望能幫助到你。

Answer 3

如您在配置文檔中所見，您的cb函數類型為：

function(startDate, endDate, label) {

當用戶選擇新日期時，這是從daterangepicker觸發的回調函數。

前兩個參數是矩對象。

因此，您的功能變為：

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

您可以在dom准備就緒時將其稱為：

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

更新的小提琴