Pikaday 多个字段上的多个触发器

Question

我将pikaday datepicker 用于表单中的多个日期选择器字段。日期选择器应通过关注输入字段并单击图标按钮来触发。

这在只有一个日期选择器时有效，但在一个页面上添加多个时，只有最后一个日期选择器在按下图标按钮之一时被触发。

任何可以帮助弄清楚如何在单击图标按钮时触发正确的日期选择器的人。

附言我试图在这个项目中避免使用 jQuery，因此首选 vanilla js 解决方案，在此先感谢！

var datepickers = document.querySelectorAll(".js-datepicker");

for (var i = 0; i < datepickers.length; i++) {
  var datepicker = datepickers[i];
  var field = datepicker.querySelector("input");
  var trigger = datepicker.querySelector("button");

  var picker = new Pikaday({
    field: field,
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000, 2020],
    firstDay: 1
  });

  trigger.addEventListener("click", function() {
    picker.show();
  });
}

.input {
  margin-bottom: 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>

<div class="input">
  <label for="input-date">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" 
           name="input-date" 
           id="input-date" 
           placeholder="Pick a date" />
    <button class="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date2">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" 
           name="input-date2" 
           id="input-date2" 
           placeholder="Pick a date" />
    <button class="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date3">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text"
           name="input-date3" 
           id="input-date3" 
           placeholder="Pick a date" />
    <button class="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

Answer 1

您必须单独初始化Pikaday。为每个按钮添加函数onclick="showClander(this)"

var datepickers = document.querySelectorAll(".js-datepicker");
var buttons = document.querySelectorAll("button");
var inputs = document.querySelectorAll("input");
var picker = [];
for (var i = 0; i < datepickers.length; i++) {
  var datepicker = datepickers[i];


  picker[i] = new Pikaday({
    field: inputs[i],
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000, 2020],
    firstDay: 1
  });

}

function showClander(obj) {
  for (var i = 0; i < buttons.length; i++) {
    if (buttons[i] == obj) {
      picker[i].show()
    }
  }
}

.input {
  margin-bottom: 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>

<div class="input">
  <label for="input-date">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" name="input-date" id="input-date" placeholder="Pick a date" />
    <button class="button" onclick="showClander(this)">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date2">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" name="input-date2" id="input-date2" placeholder="Pick a date" />
    <button class="button" onclick="showClander(this)">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date3">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" name="input-date3" id="input-date3" placeholder="Pick a date" />
    <button class="button" onclick="showClander(this)">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>