使用Pikaday的多个日期选择器

Question

我使用Pikaday作为日期选择器,因为JQuery Datepicker与Prototype Library发生冲突.

这里有几个问题.

1. 如何在多个文本框中使用pikaday datepicker
2. 如何格式化日期.以前通过使用JQuery Datepicker来更改格式我只需要
   添加dateFormat:"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文件......

希望能帮助到你