user1852728 user1852728 - 5 years ago 1401
Javascript Question

Multiple datepicker using Pikaday

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download