使用Pikaday的多个日期选择器

问题描述：

因为JQuery Datepicker与原型库发生冲突，所以使用Pikaday作为日期选择器。使用Pikaday的多个日期选择器

这里有几个问题。

我如何使用pikaday日期选择在多个文本框
如何格式化日期。以前使用JQuery的日期选择器，更改格式我只需要
添加DATEFORMAT：“DD中号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>

答

我猜你正在寻找一种让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和力矩js文件...

希望它可以帮助

我能有一个纯JavaScript的解决方案，因为我做的非p在我当前的项目中引用jquery。 – Vignesh

'var picker = new Pikaday（{field：document.getElementById（'start'）} \t）; \t VAR picker2 =新Pikaday（{字段：的document.getElementById（ '结束'）， \t的minDate：新的日期（的document.getElementById（ '开始'）值） \t} \t}）;'我试图东西像这样达到日期范围，但它不工作。 – Vignesh

答

如果这种情况会造成其他人的损失 - 您需要在@ Dominik的回答中实际触发代码te已被选中，使用“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() 
});

答

下面是我的javascript（jQuery的无），从和要使用Pikaday datepickers解决方案。它在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对象，他们在我的其他方法，在鼠兔对象用于获取用户设定的日期类的其他地方访问。唯一的问题是，这个解决方案不适用于我的Chrome-Android。任何人都可以试着让我知道你找到了什么？谢谢！

编辑

我发现这个问题，为什么Pikaday没有对铬的Android为我工作。原因是pikaday.js（https://github.com/dbushell/Pikaday/blob/master/pikaday.js）与http://dbushell.github.io/Pikaday/不同，因为区别在于附加mousedown，touchend事件。 Pikaday.js在github上附加这样的：

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

（我认为，使用Javascript定义touchend不ontouchend，可能，这就是为什么Pikaday的原因。从GitHub回购JS不工作）

而且一来就dbushell.github.io/Pikaday重视这样的：

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

使用脚本http://dbushell.github.io/Pikaday/适用于Chrome，Android设备，GIT中的一个回购没有。

答

我意识到这是不太一个问题的任择议定书的问题，但如果它的最好选择使用一个控制的日期范围，这是我使用的方法：

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的多个日期选择器

相关推荐