How to create multiple datepicker

Question

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 1

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.

How to create multiple datepicker

Sign up