Как создать несколько datepicker

Question

Я использую Pikaday datepicker plugin, и я хочу создать несколько datepickers, но мой javascript работает только для одного. Что мне теперь нужно делать?

Кроме того, они должны работать все для одного и того же класса, например, я хочу использовать класс .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> 

МОЯ 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

В этом примере я сделал это на фокус, в случае, если пользователь с помощью клавиатуры.