0

AMsul Pickadateを使用し、jquery .prependを使用してカスタム ヘッダーを追加しようとしています。

それは正常に動作しますが、1 つのページで 2 つのデータピッカーを使用すると、最初のページにカスタム ヘッダーが 2 回追加され、ばかげて見えます。

これは私のjsコードです:

    $.extend($.fn.pickadate.defaults, {
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,

    onRender: function () {
        var year = $('.datepicker').pickadate('picker').get('highlight', 'yyyy');
        var day = $('.datepicker').pickadate('picker').get('highlight', 'dd');
        var month = $('.datepicker').pickadate('picker').get('highlight', 'mmm');
        var labelday = $('.datepicker').pickadate('picker').get('highlight', 'dddd');
        console.log(year, day, month, labelday);

        $('.picker__header').prepend('<div class="picker__date-display"><div class="picker__weekday-display">' + labelday + '</div><div class="picker__month-display"><div>' + month + '</div></div><div class="picker__day-display"><div>' + day + '</div></div><div    class="picker__year-display"><div>' + year + '</div></div></div>');
    }
});

これは、1 つのページで 2 つのデータピッカーを使用した場合の結果です。 ここに画像の説明を入力

私のhtmlマークアップは次のようになります。

<!-- First datapicker-->
        <input placeholder="Selected date" type="text" id="input_from" class="form-control datepicker">

        <!--Second datapicker -->
        <input placeholder="Selected date" type="text" id="input_to" class="form-control datepicker">

そして、js を介してピッカーを初期化します。

// Datapicker initialization
        $('.datepicker').pickadate();

複数のカスタムヘッダーがある場合でも、各データピッカーに常に1つのカスタムヘッダーのみを追加するにはどうすればよいですか?

4

1 に答える 1

2

jQuery prepend メソッドは、指定した内容をセレクターに一致するすべての要素に追加します。

$('.picker__header')

.picker__headerこれは、起動されるたびに見つけることができる両方の s の先頭に追加されます。render コールバックに入れることで、datepicker がレンダリングされるたびに呼び出されます。したがって、2 つの日付ピッカーがあるため、2 回です。

最善の方法は、一度だけ呼び出されるコールバックを先頭に追加するか、レンダー コールバックのカウンターをインクリメントすることです。何かのようなもの：

var dateCounter = 0;

...

onRender: function () {
    dateCounter++;
    if (dateCounter === 2) {
        $('.picker__header').prepend(...
    }
}

しかし、これを行う方法はたくさんあります。pickadate.js API にはもっと洗練されたものがあるのではないでしょうか?

于 2016-06-16T14:33:27.427 に答える