javascript - 使用 Pikaday 的多个日期选择器

Question

我使用 Pikaday 作为日期选择器，因为 JQuery Datepicker 与原型(prototype)库有冲突。

这里有几个问题。

1. 如何在多个文本框中使用 pikaday 日期选择器
2. 如何格式化日期。以前通过使用 JQuery Datepicker，更改格式我只需要
   添加日期格式:“dd M yy”，

这是示例代码

<input type="text" id="datepicker">

<script src="pikaday.js"></script>
<script>

var picker = new Pikaday(
{    
    changeMonth: true,
    changeYear: true,
    field: document.getElementById('datepicker'),
    firstDay: 1,
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000,2020]

});

</script>

Answer 1

我猜您正在寻找一种方法让 pikaday 一起处理某个日期范围类型的事物，然后根据您在第一个上选择的日期来操纵最后一个？...我意识到这有点晚了，但也许其他人对答案感兴趣:

Pikaday 在这里不提供任何内部服务，但我能够通过销毁实例并在“来自”选择器中选择一天时再次创建它来解决这个问题。

HTML:

From: <input type="text" name="from" id="from">
To: <span id="toField"><input type="text" name="to" id="to"></span>

Javascript:

function dateRange() { //destroy to field and init with new param
 var picker = new Pikaday({ field: document.getElementById("from") });
 if(picker.toString()) {
  $("#to").pikaday('destroy');
  $("#to").remove();
  $("#toField").html('<input type="text" name="to" id="to">');

  $("#to").pikaday({ //should have the same param as the original init
   format: "YYYY-M-DD",
   minDate: moment(picker.toString(), "YYYY-MM-DD").toDate()
  });
 }
}


$(function() { //pikaday init
 $("#from").pikaday({
  format: "YYYY-MM-DD", //adjust to your liking
  minDate: moment().subtract({days: 1}).toDate()
 });

 $("#to").pikaday({
  format: "YYYY-MM-DD",
  minDate: moment().subtract({days: 1}).toDate()
 });
});

PS:不要忘记包含您的 jquery、pickaday 和 moment js 文件...

希望对你有帮助