jQuery datepicker 初期日付を入れる方法

Jquery

jQuery-UIjQueryUI の datepicker はテキスト入力欄に、カレンダーから、日付を入力できるようにすることが非常に簡単にできるので、感動していたのですが、フォーム入力確認画面などから戻るボタンなどで元のフォームにvalue値で初期値を入れておいても、リセットしてしまうようです。戻ってくると値が消えている、ただValueに値を入れただけでは、ダメみたいなので方法をシェアしておきたいと思います。

valueに値を入れてもリセットしてしまう。

なにが言いたいのかというと、、inputタグで初期値を入れておいてもテキスト欄に値が入っていないということです。

<input type="text" id="datepicker" name="acquisitionDate" size="30" value="2012-09-02">

こんなかんじで初期値2012-09-02をvalueに入れても、
日付欄には入ってこないということでした。

MethodsのsetDateがいいらしい

ドキュメント(http://api.jqueryui.com/datepicker/)を読んでみると、setDateで定義するといいようです。

$( "#datepicker" ).datepicker( "setDate", "2012-09-02" );

これで表示するようになりました。

ブラウザの環境によってはこれでも表示しないことがあるらしいよ。と指摘を受けましたので、保険?のために defaultDate のオプションにも値を入れておけば万全だと思います。ドキュメントによるとdefaultDateは表示されるカレンダーでハイライト表示する日付を指しているようなのですが・・・

$( "#datepicker" ).datepicker( "option", "defaultDate", "2012-09-02");

phpでフォーム入力をしてそこで保持した値を入れるときなどにはフォームのページ側に

$( "#datepicker" ).datepicker( "option", "defaultDate", "<?php print stripslashes($_POST&#91;"acquisitionDate"&#93;); ?>");
$( "#datepicker" ).datepicker( "setDate", "<?php print stripslashes($_POST&#91;"acquisitionDate"&#93;); ?>" );

としておいてデフォルト値の表示をさせるようにすることが出来ました!

めでたしめでたし

 

コメント

タイトルとURLをコピーしました