JQueryのTimepickerを使ったフォームでのデフォルト値の指定

Image

そろそろRYUSも夏休みが近づいてきました。ゴールデンウィークに使おうと思って適当に作ってあった「臨時ニュースプラグイン」を今回こそ、ちゃんと作り上げて公開しようと色々やっています。

今はまだ途中なのですが、Timepickerのデフォルト値を指定したときにちょっと困って解決したのでそれについて書きます。

人気記事になったDatepickerとTimepicker

唐突ですが、「[ryus_another_post_link id=1259]」の記事はそもそもこの「臨時ニュースプラグイン」の日付と時間の入力で使いたくて、入力インターフェースを探しているところの記事を書いたものでした。この記事は今でも人気があって毎日アクセス数を稼いでくれています(^^)/。なので、説明が足りずにデフォルト値で苦労されている方がいるかもしれないと思って記事にしてみました。

Timepickerのデフォルト値をセットしたら24時間制の時刻が12時間制に!?

だいたいできているのだからあともうちょっと、と手を入れ始めたのですが日付と時刻を保存して表示するフォームの所で引っかかってしまいました。

Image

作っている管理画面で日付と時間を入力して、optionテーブルに保存します。そして保存された値をhtml内でデフォルト値としてセットして

再表示しています。

Image

ところがなぜかこのとき24時間制表示だったものが12時間制表示に変わってしまっていました。

Image

時刻をクリックしたときはちゃんと24時間表示となっています。???

最初は表示されているデータと select の value に指定されているデータが違うのではないかと色々検索したのですがどうもそういう情報は見つかりません。

データを見たり、javascriptでデバッグしてみました

保存されているデータを見てみると、

Image

ちゃんと24時間制で保存されていました。

ななな、なぜ(@@)?と思ったのですが、とりあえずjavascriptでalertを表示してどの時点でこうなっちゃうのかを見てみます。

Timepickerを指定しているこの部分に1行ずつalertを表示してみます。

これで実行します。

Image

最初のalertが表示されました。なるほど、ここではまだ開始時刻も終了時刻も24時間制で表示されています。OKをクリックします。

Image

すると開始時刻だけが12時間制の表示になってしまいました。ということはつまり、

この行で24時間制表示だったのが12時間制表示になってしまうようです。OKをクリックします。

Image

このalertが表示される直前で

このように表示形式で24時間制を指定しているのでなおるかなーと思いましたが直りませんでした。OKをクリックします。

Image

特に何も変わりません。OKをクリックします。

Image

すると、alertで止めなかったときと同じく開始時刻も終了時刻も同じ12時間制表示になってしまいました。

ということは…、もしかすると24時間制表示だよ、と指定したあとにフォルト値をセットしたらいいんじゃないかなーと思いました。

htmlとJQueryを修正する

htmlはこのように時間部分のデフォルト値の指定をなくしました。

そのかわりにJQueryTimepickerの指定が終わった時点で、デフォルト値を設定するように

の2行を追加しました。

こんな感じです。

実行してみます。

Image

このようにデフォルト値が24時間制で表示されるようになりました(^^)/

やってみれば簡単に直ったのですが、日付は大丈夫なのにで分かってないとはまっちゃいそうですね♪

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る