CSS Question
How to create multiple datepicker
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
.checkinAnd 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
$(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 Source
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.