jQuery UIのdatepickerで日付が1899年や1900年になる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

datepicker01

Bootstrap+jQuery+jQuery UIでインターフェースを作ることが多いのですが、そんな中はじめて陥ったDatepickerのワナをご紹介。

今回は、画面を印刷させるということもあり、通常はinput要素を表示せずにテキストで表示しておきたかったので、日付をクリックされたら動的に要素を生成という感じにしていました。

上記のようなHTMLとJSを書き、html要素を流し込んでinput要素を表示していたのですが、この状態でinput要素をフォーカスすると、

datepicker01

このように表示され、内心「うまくいったな・・・」と思っていたのですが、「前の月へ」ボタンをクリックすると

datepicker02

日付が1899年へと飛んでしまいました。次の月へを押しても1900年が表示されてしまいます。
いろいろ試行錯誤したのですが、こちらのサイトに書いてあるようにdestroyしたりもしましたが、どうやら動的に挿入された場合は対処できないようでした。

そしていろいろ悩んだ結果、

非表示にしてあるものを、表示に変更するという方法に落ち着きました。
見た目上は同じ動作だし問題ないかということで・・・。

ちなみに余談ですが、日付部分は動的に指定日が表示されるようにPHP、またはJavascriptでコーディングしてあります。
それに、今回はonメソッドを使っていますが、「.date」自体が動的に生成されるわけではないのでclickメソッドでも大丈夫です。特に意味はありませんw

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。