javascript 使用 Pikaday 的多个日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14374510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple datepicker using Pikaday
提问by user1852728
Im using Pikaday as a datepicker because JQuery Datepicker is having conflict with Prototype Library.
我使用 Pikaday 作为日期选择器，因为 JQuery 日期选择器与原型库有冲突。
A few issues here.
这里有几个问题。
- How do i use pikaday datepicker in multiple text box
- How to format the date. Previously by using JQuery Datepicker, to change the format I only need to
add dateFormat:"dd M yy",
- 如何在多个文本框中使用 pikaday datepicker
- 如何格式化日期。以前通过使用 JQuery Datepicker，更改格式我只需要
添加 dateFormat:"dd M yy",
Here is the sample code
这是示例代码
<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>
回答by Dominik
I guess you're looking for a way to have pikaday work together for a date range type of thing and then manipulate the last one according to the date you selected in the first on? ... I realize this is a bit late but perhaps someone else is interested in an answer:
我猜您正在寻找一种方法让 pikaday 一起处理日期范围类型的事情，然后根据您在第一个中选择的日期操作最后一个？...我意识到这有点晚了，但也许其他人对答案感兴趣：
Pikaday does not offer anything inhouse here but I was able to work around this by destroying the instance and creating it again when a day has been picked in the "from" picker.
Pikaday 在这里不提供任何内部内容，但我能够通过销毁实例并在“来自”选择器中选择一天后再次创建它来解决此问题。
HTML:
HTML：
From: <input type="text" name="from" id="from">
To: <span id="toField"><input type="text" name="to" id="to"></span>
Javascript:
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: don't forget to include your jquery, pickaday and moment js files...
PS：不要忘记包含您的 jquery、pickaday 和 moment js 文件...
Hope it helps
希望能帮助到你
回答by Shane
I realize this is not quite an answer to the op question, but if it's preferable to select a date range using one control, this is the method I'm using:
我意识到这不是 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);
Where the rangeSet and rangeClear functions would exist elsewhere with the following signatures:
rangeSet 和 rangeClear 函数存在于其他地方，具有以下签名：
function rangeSet(start, end) {
//do something with the start and end dates
}
function rangeClear() {
//clear the start and end dates
}
You can see this working here: http://codepen.io/cshanejennings/pen/OMWLLg
你可以在这里看到这个工作：http: //codepen.io/cshanejennings/pen/OMWLLg
回答by Ian Wootten
In case this stumps anyone else - you need to actually trigger the code in @Dominik's answer once a date has been selected, using the "onSelect" trigger. My code has ended up like this (because I'm using the jquery plugin version throughout in a UK format):
万一这难倒了其他人 - 您需要在选择日期后实际触发@Dominik 的答案中的代码，使用“onSelect”触发器。我的代码最终是这样的（因为我使用的是英国格式的 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()
});
回答by Vikrant
The following is my Javascript (without jQuery) solution for From and To datepickers using Pikaday. It's working in Chrome and Firefox, but it does not work in Chrome-Android.
以下是我使用 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);
Since I have sinPika and einPika objects added as members to my class, they're accessible elsewhere in my class in other methods, where Pika objects are used to fetch the dates set by users. Only thing is that this solution is not working in Chrome-Android for me. Could anyone try and let me know what you find? Thanks!
由于我将 sinPika 和 einPika 对象作为成员添加到我的类中，因此它们可以在我类中的其他地方通过其他方法访问，其中 Pika 对象用于获取用户设置的日期。唯一的问题是这个解决方案对我来说不适用于 Chrome-Android。任何人都可以尝试让我知道你发现了什么？谢谢！
Edit
编辑
I found the problem why Pikaday wasn't working on chrome-android for me. The reason is that the pikaday.js (https://github.com/dbushell/Pikaday/blob/master/pikaday.js) is different from the one here http://dbushell.github.io/Pikaday/, in that the difference lies in attaching the mousedown, touchend events. Pikaday.js on github attaches like this:
我发现了为什么 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);
(I think, Javascript defines touchendnot ontouchend, may be, this is the reason why Pikaday.js from github repo does not work.)
（我认为，Javascript 定义了touchendnot ontouchend，可能是，这就是为什么来自 github repo 的 Pikaday.js 不起作用的原因。）
And the one on dbushell.github.io/Pikaday attaches like this:
而 dbushell.github.io/Pikaday 上的一个附加如下：
addEvent(self.el, 'mousedown', self._onMouseDown, true);
Using the script from http://dbushell.github.io/Pikaday/works on chrome-android, the one on git repo does not.
使用来自http://dbushell.github.io/Pikaday/的脚本适用于 chrome-android，而 git repo 上的则不能。
