javascript - 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>