4

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

这里有几个问题。

  1. 我如何在多个文本框中使用 pikaday 日期选择器
  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>
4

4 回答 4

6

我猜您正在寻找一种方法让 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 文件...

希望能帮助到你

于 2013-02-04T04:41:51.117 回答
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()
});
于 2014-06-23T13:36:47.853 回答
2

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

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

于 2015-12-31T22:14:05.120 回答
1

以下是我使用 Pikaday 的 From 和 To 日期选择器的 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 上的脚本则不能。

于 2015-03-11T05:16:12.743 回答