I'm using Pikaday datepicker plugin and I want to create multiple datepickers, but my javascript works just for one. What do I have to do now?
Also, they must work all for the same class, for example I want to use
.checkin
<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>
$(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();
}
})
It seems like it would be easier to create the Pikaday instance when you click, and not beforehand. This way you can add as many .checkin, .checkout as you need. Example:
$(document).on('focus', '.checkin, .checkout', function (){
...// your Pikaday instance here
});
Here's an updated version of your CodePen with this idea: http://codepen.io/jpedroribeiro/pen/ObzRQe
In this example I've done it on focus, in case user is using the keyboard.