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

Question

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

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

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

p.s。我试图在这个项目中避免使用 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>

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

Pikaday multiple triggers on multiple fields

javascript

pikaday