Question

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

这里有一些问题。

如何在多个文本框中使用pikaday datepicker
如何格式化日期。以前通过使用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文件......

希望有所帮助

Answer 2

如果这会阻止其他任何人 - 你需要使用“onSelect”触发器在选择了日期后实际触发@Dominik答案中的代码。我的代码最终都是这样的（因为我在整个英国格式中都使用了jquery插件版本）：

var dateFormat = "DD/MM/YYYY";

function dateRange() { //destroy to field and init with new param

  var $from = $("#from").pikaday({
    format: dateFormat,
  });

   if($from.val()) {
      $("#to").pikaday('destroy');
      $("#to").remove();
      $("#toField").html('<input type="text" name="to" id="to">');

      $("#to").pikaday({
        format: dateFormat,
        minDate: moment($from.val(), dateFormat).toDate()
      });
    }
}


$("#from").pikaday({
  format: dateFormat,
  minDate: moment().subtract({days: 1}).toDate(),
  onSelect: dateRange
});

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

Answer 3

以下是我使用Pikaday的From和To datepickers的Javascript（没有jQuery）解决方案。它在Chrome和Firefox中运行，但在Chrome-Android中无效。

var nowDT = new Date();
var nowDTStr = nowDT.toShortDate();

var sin = document.createElement('input');
sin.setAttribute('type', 'text');
sin.setAttribute('id', this.id + "_cp_sin");
sin.style.width = '20%';
sin.style.cssFloat = 'left';
this.controlPanel.appendChild(sin);

this.sinPika = new Pikaday({
    field: sin,
    firstDay: 1,
    minDate: new Date('2001-01-01'),
    maxDate: new Date(nowDTStr),
    yearRange: [2001, nowDT.getFullYear()]
});
this.sinPika.setDate(nowDTStr);    

var ein = document.createElement('input');
ein.setAttribute('type', 'text');
ein.setAttribute('id', this.id + "_cp_ein");
ein.style.width = '20%';
ein.style.cssFloat = 'right';
this.controlPanel.appendChild(ein);

this.einPika = new Pikaday({
    field: ein,
    firstDay: 1,
    minDate: new Date('2001-01-01'),
    maxDate: new Date(nowDTStr),
    yearRange: [2001, nowDT.getFullYear()]
});
this.einPika.setDate(nowDTStr);

由于我将sinPika和einPika对象作为成员添加到我的班级，因此可以通过其他方法访问我班级的其他地方，其中Pika对象用于获取用户设置的日期。唯一的问题是这个解决方案对我来说不适用于Chrome-Android。谁能试着让我知道你找到了什么？谢谢！

修改

我发现问题为什么Pikaday不能为我开发chrome-android。原因是pikaday.js（https://github.com/dbushell/Pikaday/blob/master/pikaday.js）与此处的http://dbushell.github.io/Pikaday/不同，因为不同之处在于附加了mousedown，touchend事件。 github上的Pikaday.js就像这样：

addEvent(self.el, 'ontouchend' in document ? 'ontouchend' : 'mousedown', self._onMouseDown, true);

（我认为，Javascript定义touchend而非ontouchend，可能是，这就是为什么来自github repo的Pikaday.js不起作用的原因。）

dbushell.github.io/Pikaday上的那个附件如下：

addEvent(self.el, 'mousedown', self._onMouseDown, true);

使用http://dbushell.github.io/Pikaday/中的脚本适用于chrome-android，git repo上的脚本不适用。

Answer 4

我意识到这不是op问题的答案，但如果最好使用一个控件选择日期范围，这就是我正在使用的方法：

var cal = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: (function() {
      var init = true,
          start,
          end;
      return function(date) {
        if (init) {
          start = date;
          picker.setStartRange(date);
          picker.setEndRange(null);
          rangeClear();
        } else {
          end = date;
          picker.setEndRange(date);
          rangeSet(start, end);
        }
        picker.draw();
        init = !init;
    }
    }())
});
cal.appendChild(picker.el);

rangeSet和rangeClear函数在其他地方存在，并带有以下签名：

function rangeSet(start, end) {
  //do something with the start and end dates
}
function rangeClear() {
  //clear the start and end dates
}

你可以在这里看到这个：http://codepen.io/cshanejennings/pen/OMWLLg

使用Pikaday的多个日期选择器

4 个答案: