Pikaday多個字段上的多個觸發器

Question

我正在使用pikaday datepicker爲表單中的多個日期選擇器字段。日期選擇器應該通過關注輸入字段並單擊圖標按鈕來觸發。

這隻能有一個日期選擇器，但在一個頁面上添加多個時，只有最後日期選擇當按下圖標按鈕中的一個被觸發時。

任何人誰可以幫助搞清楚如何觸發正確的日期選擇器點擊圖標按鈕時。

p.s.我試圖避免在這個項目jQuery，所以香草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>