How to make Pikaday datepicker always visible

Question

I am using Pikaday javascript datepicker .

The default functionality is to attach it to the input, as a result of which clicking on the input will load the datapick, and its position will relate to the input.

I want to use this library to display an always visible calendar. I tried several things without success, for example, attaching it to a div. I would like him to always show up and be able to control his position.

Any ideas?

Answer 1

Firstly, I also implemented a hacker solution, but then I found the right way to make Pikaday datepicker always visible:

var picker = new Pikaday( { field: document.getElementById('datepicker'), bound: false, container: document.getElementById('container'), }); 

Example: http://dbushell.imtqy.com/Pikaday/examples/container.html

Answer 2

If this helps someone else:

Since the Pikaday library is not really intended to be used that way, I had to implement the work. It's good that it does not require modification of the Pikaday code itself and therefore is fully compatible with future versions (provided that they do not rename the "hide" function).

First, I just attach the date picker to the empty div and move it with css to it in the right place:

 var datePicker = new Pikaday({ field: $('#empty-div')[0] }); 

Then I just proxy the Pikaday hide function and temporarily set it to noop:

 var hideFun = datePicker.hide; datePicker.hide = function() {/*noop*/} 

Now I can show the date picker and not worry that it disappears on me (since inside it will refer to the new noop hide function):

 datePicker.show(); 

Finally, when I am ready to restore the original datepicker operation, I reset the function to the original one, and hide the datePicker file (since I am showing it in modal form):

 datePicker.hide = hideFun; datePicker.hide();