Question

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

此外，他们必须为同一个班级工作，例如我想对所有签到输入使用.checkin类。

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

在您点击时，而不是事先创建Pikaday实例似乎更容易。这样，您可以根据需要添加任意数量的 .checkin，.checkout 。例如：

$(document).on('focus', '.checkin, .checkout', function (){
    ...// your Pikaday instance here
});

以下是您的CodePen的更新版本：http://codepen.io/jpedroribeiro/pen/ObzRQe

在此示例中，我已经在焦点上完成了此操作，以防用户使用键盘。

如何创建多个datepicker

1 个答案: