0

Date Range Picker プラグイン (moment.js 経由) が日付形式を (MM/DD/YYYY) から Unix 日付形式に変換するという問題が発生しています。

問題を再現するために、Fiddle を作成しました。Fiddle で日付範囲をクリックすると、ピッカーが表示されます。ピッカーで日付範囲を選択し、[適用] をクリックします。これを行うと、日付範囲の形式が Unix 形式になっていることがわかります。

[適用] をクリックしたときに日付形式を「MM/DD/YYYY」に戻すにはどうすればよいですか?

HTML

 <div id="daterange"><span></span></div>

Jクエリ

$(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/

よろしくお願いします。

4

3 に答える 3

0

開始値と終了値を瞬間的にラップしてから、次のようにフォーマットします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-06T15:58:10.753 に答える
0

コールバック関数をこれに置き換えます

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

フォーマットを変更するだけです。

それが役に立てば幸い。

于 2016-12-06T15:58:24.410 に答える
0

構成ドキュメントでわかるように、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 ready で次のように呼び出すことができます。

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

更新されたフィドル

于 2016-12-06T16:06:19.850 に答える