How to make Pikaday datepicker always visible

Question

I'm using the Pikaday javascript datepicker.

The default functionality is to attach it to an input whereby clicking the input would load the datepicker and its position would be relative to the input.

What I want is to use this library to show an always visible calendar. I tried several things without success such as attaching it to a div. I'd like to be able to have it always shown and be able to control its position.

Any ideas?

Answer 1

At first, I have also implemented a hacky solution, but then I found a regular way to make Pikaday datepicker always visible:

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

With the example here: https://pikaday.com/examples/container.html

Answer 2

In case this helps somebody else:

Since the Pikaday library isn't really meant to be used in this manner, I had to implement a work around. The good thing is that it doesn't require modification to the Pikaday code itself and is therefore fully compatible with future versions (assuming they don't rename the 'hide' function).

First I just attach the date picker to an empty div and move it around using css until its in the right spot:

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

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

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

Now, I can show the date picker and not worry about it vanishing on me (since internally it will invoke the new noop hide function):

datePicker.show();

Finally, when I'm ready to restore the original operation of the datepicker, I reset the function to the original one, and hide the datePicker (since I'm showing it in a modal):

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