如何创建多个日期选择器

Question

我正在使用Pikaday datepicker plugin，并且我想创建多个日期选择器，但我的 javascript 仅适用于一个。我现在该怎么办？

此外，它们必须全部用于同一个类，例如，我想对所有签入输入使用 .checkin 类。

And click to see on codepen

我的 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

在这个例子中，我在 focus 上完成了它，以防用户使用键盘。