複数のdatepickerを作成するには

Question

私はPikaday datepicker pluginを使用しています。複数のdatepickerを作成したいのですが、javascriptは1つのみで動作します。私は今何をしなければならないのですか？

また、すべて同じクラスで動作する必要があります。たとえば、すべてのチェックイン入力に.checkinクラスを使用したいとします。

And click to see on codepen

MY HTML

<div class="row-1 form"> 
    <input type="text" class="checkin"> 
    <input type="text" class="checkout"> 
</div> 

<div class="row-2 form"> 
    <input type="text" class="checkin"> 
    <input type="text" class="checkout"> 
</div> 

MY JSあなたがクリックしたときにPikadayインスタンスを作成する方が簡単ではなく、事前に考えのように思える

$(document).ready(function(){ 
    var e, f, g = function() { 
    i.setStartRange(e); 
    j.setStartRange(e); 
    j.setMinDate(e); 
    }, 
    h = function() { 
    i.setEndRange(f); 
    i.setMaxDate(f); 
    j.setEndRange(f); 
    }, 
    i = new Pikaday({ 
    numberOfMonths: 2, 
    field: document.getElementsByClassName("checkin")[0], 
    format: "DD.MM.YYYY", 
    minDate: new Date(), 
    firstDay: 1, 
    i18n: { 
    previousMonth: "Önceki Ay", 
    nextMonth: "Sonraki Ay", 
    months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"], 
    weekdays: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"], 
    weekdaysShort: ["Paz", "Pzt", "Sa", "Ça", "Pe", "Cu", "Cum"] 
    }, 
    maxDate: new Date(2020, 12, 31), 
    onSelect: function() { 
    e = this.getDate(); 
    g(); 
    } 
    }), 
    j = new Pikaday({ 
    numberOfMonths: 2, 
    field: document.getElementsByClassName("checkout")[0], 
    format: "DD.MM.YYYY", 
    minDate: new Date(), 
    firstDay: 1, 
    i18n: { 
    previousMonth: "Önceki Ay", 
    nextMonth: "Sonraki Ay", 
    months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"], 
    weekdays: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"], 
    weekdaysShort: ["Paz", "Pzt", "Sa", "Ça", "Pe", "Cu", "Cum"] 
    }, 
    maxDate: new Date(2020, 12, 31), 
    onSelect: function() { 
    f = this.getDate(); 
    h(); 
    } 
    }), 
    k = i.getDate(), 
    l = j.getDate(); 
if (k) { 
    e = k; 
    g(); 
} 
if (l) { 
    f = l; 
    h(); 
} 
}) 

Answer 1

。このようにして、必要に応じて.checkin、.checkoutを追加できます。例：私は、ユーザーがキーボードを使用している場合には、フォーカスにそれをやった。この例ではhttp://codepen.io/jpedroribeiro/pen/ObzRQe

：

$(document).on('focus', '.checkin, .checkout', function(){ 
    ...// your Pikaday instance here 
}); 

ここでは、この考えにあなたのCodePenの更新されたバージョンです。