如何創建多個日期選擇器

Question

我正在使用Pikaday datepicker plugin，我想創建多個日期選擇器，但我的JavaScript只適用於一個。我現在必須做什麼？

此外，他們必須爲同一個班級工作，例如我想使用.checkin班級的所有簽入輸入。

And click to see on codepen

我的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

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

現在看來似乎會更容易些，當你點擊創建Pikaday實例，而不是事先。這樣，您可以根據需要添加儘可能多的.checkin，.checkout。例如：

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

這是你的CodePen的更新版本有這樣的想法：http://codepen.io/jpedroribeiro/pen/ObzRQe

在這個例子中，我已經做到了在焦點，如果用戶使用鍵盤。