日期範圍選取器插件日期格式問題

我遇到了日期範圍選取器插件（通過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/

在此先感謝您的幫助。

來源

2016-12-06 dentalhero

謝謝大家。我明白我出錯的地方，我很欣賞它。所有3個答案產生所需的結果，但我只能接受一個答案。 – dentalhero

正如你可以看到你的config documentationCB功能類型：

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

更新fiddle

來源

2016-12-06 16:06:19 gaetanoM

的時刻只是包裝你的起點和終點值，然後將其格式化爲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，您應該需要指定輸入格式。

來源

2016-12-06 15:58:10

與此

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

其替換您的回調函數只是你必須改變格式。

希望它有幫助。

來源

2016-12-06 15:58:24

日期範圍選取器插件日期格式問題

回答

相關問題