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?

I'd prefer to stick to pickaday if possible. I've always been averse to jqueryui components. — oym, May 16 '14 at 21:11
I've come up with a solution that involves attaching the calendar to a div, then positioning the div such that the calendar comes up in the right position. The key then is to proxy the calendar's hide() function so that its essentially a noop until I want it to close at which time I restore its original functionality. This works fine now. I'll still keep this question open in case theres a better solution. — oym, May 16 '14 at 21:49

score 17 · Answer 1 · edited Apr 27 '21 at 04:11

17

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

edited Apr 27 '21 at 04:11

sumeet

53
1
4

answered Aug 16 '15 at 22:48

Damjan Pavlica

31,277
10
71
76

score 6 · Answer 2 · edited Jul 31 '14 at 16:06

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

How to make Pikaday datepicker always visible

2 Answers2