recruit_man recruit_man - 2 days ago 4
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

.checkin
class for all checkin input.

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

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

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.

Comments