Question

我在表单中使用pikaday datepicker表示多个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在多个字段上有多个触发器

1 个答案: