Geek Answers Handbook

Multiple Datpickers Using Pikaday

Im uses Pikaday as a datepicker because the jQuery Datepicker conflicts with the prototype library.

A few questions are here.

  • How to use pikaday datepicker in multiple text fields
  • How to format a date. Previously, using jQuery Datepicker to change the format, I only need to add dateFormat: "dd M yy",

Here is a 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>
+4
source share
4 answers

I assume that you are looking for a way to work together pikaday for the type of date range, and then manipulate the latter according to the date you selected in the first part? ... I understand that this is a bit late, but maybe someone else is interested in the answer:

Pikaday does not offer anything here, but I was able to get around this by destroying the instance and creating it again when I selected the day in the "from" assembly.

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: don't forget to include jquery, pickaday and moment js files ...

Hope this helps

+7
source

In case this stump is anyone else - you need to actually call the code in @Dominik as soon as the date has been selected using the onSelect trigger. My code ended up like this (because I am using the UK jquery plugin version):

 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() });
+2
source

The following is my Javascript (without jQuery) solution for From and To datepickers using Pikaday. It works in Chrome and Firefox, but it does not work in 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 of my class, they are available elsewhere in my class in other ways, where Pika objects are used to get the dates set by users. The only thing is that this solution does not work in Chrome-Android for me. Can someone try and let me know what you find? Thanks!

Edit

I found the problem why Picadeus didn't work on the chrome android for me. The reason is that pikaday.js ( https://github.com/dbushell/Pikaday/blob/master/pikaday.js ) is different from the one here http://dbushell.imtqy.com/Pikaday/ , because the difference consists in attaching muscle events. Pikaday.js on github is attached as follows:

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

(I think Javascript defines touchend not ontouchend , maybe for that very reason Pikaday.js from github repo does not work.)

And the one on dbushell.imtqy.com/Pikaday is attached as follows:

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

Using the script from http://dbushell.imtqy.com/Pikaday/ works on a chrome android, but not in the git repository.

+1
source

I understand that this is not quite the answer to the op question, but if it is preferable to select a date range with a single control, this is the method I use:

 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);

If the rangeSet and rangeClear functions exist elsewhere with the following signatures:

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

You can see how it works here: http://codepen.io/cshanejennings/pen/OMWLLg

+1
source

More articles:


All Articles