javascript - Pikaday datepicker を常に表示する方法

Question

Pikaday javascript datepickerを使用しています。

デフォルトの機能は、それを入力にアタッチすることです。これにより、入力をクリックすると、日付ピッカーが読み込まれ、その位置が入力に対して相対的になります。

私が望むのは、このライブラリを使用して、常に表示されるカレンダーを表示することです。divにアタッチするなど、成功せずにいくつかのことを試しました。常に表示して、位置を制御できるようにしたいと思います。

何か案は？

Answer 1

最初は、ハッキーなソリューションも実装しましたが、Pikaday datepicker を常に表示する通常の方法を見つけました。

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

ここに例を示します: https://pikaday.com/examples/container.html

Answer 2

これが他の誰かを助ける場合：

Pikaday ライブラリは実際にはこのように使用することを意図していないため、回避策を実装する必要がありました。良い点は、Pikaday コード自体を変更する必要がないため、将来のバージョンと完全に互換性があることです (「非表示」関数の名前が変更されていない場合)。

まず、日付ピッカーを空の div にアタッチし、css を使用して適切な場所に移動します。

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

次に、Pikaday hide 関数をプロキシして、一時的に noop に設定します。

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

これで、日付ピッカーを表示でき、それが消えてしまうことを心配する必要はありません (内部的に新しい noop hide 関数が呼び出されるため)。

datePicker.show();

最後に、datepicker の元の操作を復元する準備ができたら、関数を元の関数にリセットし、datePicker を非表示にします (モーダルで表示しているため)。

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