Multiple datepicker using Pikaday

Question

Im using Pikaday as a datepicker because JQuery Datepicker is having conflict with Prototype Library.

A few issues here.

1. How do i use pikaday datepicker in multiple text box
2. How to format the date. Previously by using JQuery Datepicker, to change the format I only need to
   add 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>

Answer 1

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 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.

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 your jquery, pickaday and moment js files...

Hope it helps

Answer 2

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

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

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:

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:

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

Answer 4

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.

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!

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:

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

(I think, Javascript defines touchend not ontouchend, may be, this is the reason why Pikaday.js from github repo does not work.)

And the one on dbushell.github.io/Pikaday attaches like this:

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.