datetimepickerをfrom～to指定で使う際にtoのデフォルト日付をfrom日付にする
PHPでプログラム開発をする際に、私は日付入力補助としてDateTimePickerを使います。
直感的に日付選択できる点と、時刻も選択できるところが、MYSQLのdatetime変数と相性が良いからです。
ただ、今回利便性を考えたときに気になる部分がいくつかありました。
結論から言うとオプション設定で改善することができました。
忘備録として記録いたします。
今回の内容
気になった問題点（１）：開始日～終了日選択で、開始日より過去日が選択できてしまう。
まずはサンプル１をご覧いただければ幸いです。
From～TO形式で日付選択する場合、前提として以下の点が挙げられます。
- FROM日付よりTO日付が過去日にならないこと
- 再入力時にFROM日付がTO日付より未来日にならないこと
ところがDateTimePickerをそのまま使用すると、この前提が崩れた動きをします。そこでオプションで何とかします。
改善方法：日付選択時に上限値、下限値も設定する
論より証拠です。
こちらのサンプル2を見ていただくと、FROM日付より過去日のTO日付が選択できないようになっています。
ソースは以下の通りです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
<!doctype html> <html> <head> <meta charset="shift_jis"> <title>datetimepicer テスト</title> <script src="js/jquery.min.js"></script> <link href="js/jquery.datetimepicker.css" rel="stylesheet" type="text/css"> <script src="js/jquery.datetimepicker.full.js"></script> <script> $(document).ready(function() { var from_date = null; var to_date = null; $(document).ready(function() { $.datetimepicker.setLocale('ja'); $('#from_date').datetimepicker ({ format:'Y-m-d H:i', defaultTime:'09:00' }); $('#to_date').datetimepicker ({ format:'Y-m-d H:i', defaultTime:'18:00' }); // ↓↓ここから追加 // TO日付が選択されている場合FROMの上限値をセットする if ($(":text[name='to_date']").val() != "") { to_date = $(":text[name='to_date']").val(); $('#from_date').datetimepicker({ maxDate:to_date }); } // FROM日付が選択されている場合TO日付の下限値をセットする if ($(":text[name='from_date']").val() != "") { from_date = $(":text[name='from_date']").val(); $('#to_date').datetimepicker({ minDate:from_date }); } //FROM日付をセットしたタイミングでTO日付の下限値をセットする $("#from_date").change(function() { from_disset(false); to_disset(false); from_date = $(":text[name='from_date']").val(); $('#to_date').datetimepicker({ minDate:from_date }); }); // TO日付をセットしたタイミングでFROM日付の上限値をセットする $("#to_date").change(function() { to_date = $(":text[name='to_date']").val(); $('#from_date').datetimepicker({ maxDate:to_date }); }); // ↑↑ここまでを追加 from_disset(false); to_disset(true); }); function from_disset(func) { $("#from_date").prop("disabled", func); if ($(":text[name='to_date']").val() != "") { to_disset(func); } } function to_disset(func) { if ($(":text[name='from_date']").val() != "") { $("#to_date").prop("disabled", func); } else { $("#to_date").prop("disabled", true); } } }); </script> </head> <body> <p> datetimepicker 使用例（2）<br> ・開始日過去日選択をできないように修正<br> ・終了日より未来日を選択できないように修正<br> →開始日を翌月以降選択した場合に、終了日表示を開始日から表示できるようにしたい </p> 開始日: <input name="from_date" type="text" value="" style="width:200px;" id="from_date" autocomplete="off"> ～ 終了日: <input name="to_date" type="text" value="" style="width:200px;" id="to_date" autocomplete="off"> </body> </html> |
DateTimePickerオプションの上限値（maxDate）、下限値（minDate）にその都度日付をセットすればOK
仕掛けは、DateTimePickerのオプション設定を、日付設定ごとにセットすればOKです。
Jqueryの.changeは、値に変更があったときに動作します。
これを使って、FROM日付、TO日付に変更があったときに上限値、下限値をセットします。
ちなみにこれはDateTimePickerの公式記述例にあります。
気になった問題点（２）：FROM日付に翌月を選択した際に、TO日付を開くと、選択できない過去日が表示される。
さきほどのサンプル2を見ていただくと、FROM日付を翌月日にすると、TO日付に表示されるカレンダーは、すべて選択できない日付になっています。
翌月表示すれば選択できますが、ちょっと使い勝手が悪いと思いました。
そこでTO日付のデフォルトを、FROM選択日付にできないものかと思いました。
これは公式設定例にはなく、いろいろ調べてやり方を見つけました。
FROM日付選択時にTO日付のデフォルト日付を変更する
まずは論より証拠です。
こちらのサンプル3を見ていただくと、FROM日付を翌月以降選択しても、TO日付はFROM日付から表示されます。
ソースはこちらです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<!doctype html> <html> <head> <meta charset="shift_jis"> <title>datetimepicer テスト</title> <script src="js/jquery.min.js"></script> <link href="js/jquery.datetimepicker.css" rel="stylesheet" type="text/css"> <script src="js/jquery.datetimepicker.full.js"></script> <script> $(document).ready(function() { var from_date = null; var to_date = null; $(document).ready(function() { $.datetimepicker.setLocale('ja'); $('#from_date').datetimepicker ({ format:'Y-m-d H:i', defaultTime:'09:00' }); $('#to_date').datetimepicker ({ format:'Y-m-d H:i', defaultTime:'18:00' }); if ($(":text[name='to_date']").val() != "") { to_date = $(":text[name='to_date']").val(); $('#from_date').datetimepicker({ maxDate:to_date }); } if ($(":text[name='from_date']").val() != "") { from_date = $(":text[name='from_date']").val(); $('#to_date').datetimepicker({ minDate:from_date }); } $("#from_date").change(function() { from_disset(false); to_disset(false); from_date = $(":text[name='from_date']").val(); $('#to_date').datetimepicker({ minDate:from_date, // デフォルト日付をセット defaultDate:from_date // ここまで }); }); $("#to_date").change(function() { to_date = $(":text[name='to_date']").val(); $('#from_date').datetimepicker({ maxDate:to_date }); }); from_disset(false); to_disset(true); }); function from_disset(func) { $("#from_date").prop("disabled", func); if ($(":text[name='to_date']").val() != "") { to_disset(func); } } function to_disset(func) { if ($(":text[name='from_date']").val() != "") { $("#to_date").prop("disabled", func); } else { $("#to_date").prop("disabled", true); } } }); </script> </head> <body> <p> datetimepicker 使用例（3）<br> 開始日で選択した日を終了日のデフォルト表示に設定 </p> 開始日: <input name="from_date" type="text" value="" style="width:200px;" id="from_date" autocomplete="off"> ～ 終了日: <input name="to_date" type="text" value="" style="width:200px;" id="to_date" autocomplete="off"> </body> </html> |
DateTimePickerオプションの「デフォルト日付(defaultDate:)」をセットすればOK
公式設定になかったため、どうやればできるか試行錯誤しましたが、意外と簡単にできました。
DateTimePickerにはdefaultDateオプション（デフォルト表示日付）があります。何も設定しなければ当日がセットされます。TO日付の部分にFROM選択日付をセットすれば、FROM日付で翌月以降を選択しても、TO日付はFROM日付から表示されるようになります。
FROM日付がセットされたタイミングで、TO日付のデフォルト日付をFROM日付にすることで
DateTimePickerは様々なオプションがあり応用しやすいです
今回DateTimePickerについて調べることで、様々な想定がされていることがわかりました。
そのおかげで、容易に問題点を解決することができました。
webプログラムはデータベース、プログラム、スクリプトを駆使しながら制作します。
利便性の高いスクリプトを選ぶことは、プログラム開発においても重要な要素であると感じました。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
