日付範囲ピッカープラグイン日付形式の問題

Question

Date Range Pickerプラグイン（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/

感謝。

Answer 1

あなたがconfig documentationで見ることができるようにあなたのCB関数は型である：

function(startDate, endDate, label) { 

それは、ユーザーが新しい日付を選択したときにdaterangepickerからトリガコールバック関数です。

最初の2つの引数はモーメントオブジェクトです。

だから、あなたの関数は次のようになります。

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

、あなたは、DOMとして準備でそれを呼び出すことができます。

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

更新fiddle

Answer 2

ちょうどその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 3

そのはちょうどあなたが形式を変更する必要があり、この

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

であなたのコールバック機能を交換してください。

希望します。