javascript - How to make Pikaday datepicker always visible - Stack Overflow

admin管理员组

文章数量:1201412

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'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?

• javascript
• datepicker
• visibility
• pikaday

Share Improve this question Follow edited Aug 16, 2015 at 22:45 Damjan Pavlica 34k1010 gold badges7575 silver badges7878 bronze badges asked May 16, 2014 at 20:58 oymoym 7,0831717 gold badges6464 silver badges8989 bronze badges 3

• jqueryui.com/datepicker/#inline – Susheel Singh Commented May 16, 2014 at 21:09
• 1 I'd prefer to stick to pickaday if possible. I've always been averse to jqueryui components. – oym Commented May 16, 2014 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 Commented May 16, 2014 at 21:49

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 18

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

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

本文标签： javascriptHow to make Pikaday datepicker always visibleStack Overflow