- ベストアンサー
プルダウンメニューで日付を選択する方法
- プルダウンメニューを使用して日付と時刻を選択する方法についてまとめました。HTML、CSS、JavaScriptを活用することで、コンテンツを操作することが可能です。
- プルダウンメニューには日付と時刻を選択する機能があります。また、10分前や10分後の時刻を表示する機能も備わっています。さらに、現在時刻を表示し、指定された時間の画像を表示することもできます。
- 大量のページにこの機能を組み込むためには、HTMLとCSSを使ってプルダウンメニューの構造を作り、JavaScriptやjQueryを活用して動作を実装する必要があります。フレームの利用はできませんが、Webページの紹介や動きを説明したサンプルページの作成も可能です。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 先のサンプルページから参照できるjquery.datetime.jsを新しいものにしておきました。 そちらを参考にして下さい。 今回の仕様追加により修正した部分があるのでご注意ください。 修正点 ・年月変更時にMAX日数を設定するようにしたが、初期表示時の考慮が抜けていたため、2012年2月で初期表示した場合に31日まで表示されていた
その他の回答 (4)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >やりたいことは、プルダウンで「月」を選択した際に、 おそらく「年」または「月」にしないと、2013年2月を選んだときに「日」は28になりますが「年」を2012年に変更した場合本来は29日にならないといけないのに変更されないと思います。 いろいろカスタマイズしているようですので、以下を参考にして埋め込んでみてください。 (主要変更場所以外は省いてます) // 「年」のchange時にsetDayを呼ぶように設定 var $year = $('<select />').change ( function() { setDay ( $year, $month, $day ); }); // 「年」のchange時にsetDayを呼ぶように設定 var $month = $('<select />').change ( function() { setDay ( $year, $month, $day ); }); // ==== 中略 // setDayを新規に追加 function setDay ( $year, $month, $day ) { // 現在選択されている日付を取得 var selected = $day.val(); // 現在選択されている「年」「月」からその月の最大「日」を取得 var date = new Date ( $year.val(), $month.val(), 0 ).getDate(); // 「日」コンボのoptionタグをすべて削除 $day.find('option').remove(); // 「日」コンボのoptionタグを1日～取得した最大日と選択されていた日付で再設定 // (選択していた日付が変更後に存在しない場合は1日が選択される) // (月の最終日が選択されるようにする場合はselectedではなくdateを指定すれば良し) setOption ( $day, 1, date, selected ); }
補足
丁寧な回答、何度もありがとうございます。 選択されているリストの値を戻り値にして次のリストへ反映…？と思っていたので 上のソースはすっきりしていて驚きました。 jQueryが知識不足で（最初に書かなくて申し訳ないです）、このソースを どこに埋め込めばよいのかわかりません。。 細かい部分を改造しておりますが、大元の構造は変わっておりません。 どの位置に入れればいいかを教えてください。 何もかもお聞きする形になってすいません。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。お役に立てたようでよかったです。 現在年より指定する場合は var nowDate = new Date(); var dateTime = $('#datetime').datetime({ ys: nowDate.getYear()-10, ye: nowDate.getYear()+10, で指定します。
補足
お礼が遅くなりまして申し訳ありません。 回答ありがとうございました！ できました。 jquery.datetime.jsを使わせていただき、中をいろいろ改造しているのですが、 もうひとつだけお聞きしてよろしいでしょうか。 またトピずれの質問で申し訳ありません…。 やりたいことは、プルダウンで「月」を選択した際に、 ・1月を選択時→「日」のリストの一番下が「31」 ・2月を選択時→「日」のリストの一番下が「28(29)」 …という風に「日」の末尾を月によって変更したいというものです。 選択した値をgetして、同時に次に反映させる方法がどうしてもわかりません。 教えていただけると嬉しいです。 よろしくお願いいたします。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 jQueryプラグイン形式で作ってみました。 表示方法は以下を表示したいページの<head></head>に入れるだけです。 バグ等あったらごめんなさい。 body内に<div id="#datetime"></div>を入れてください。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript" src="jquery.datetime.js"></script> <script type="text/javascript"> $().ready ( function() { var dateTime = $('#datetime').datetime({ ys: '2010', ye: '2014', prev: -3, btn1: '3分前', callback: function() { var date = dateTime.getDate(); var html = date.year + '/' + date.month + '/' + date.date; html += ' ' + date.hour + ':' + date.minute; $('#result').html ( html ); } }).data('datetime'); }); </script> ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7569314/ jquery.datetime.jsは同一ディレクトリにあります。 オプションの設定等詳しくはリンク先のページを参照してみてください。 わからないことがあったら補足下さい。
補足
ありがとうございます！ そのものを作っていただけて大変感謝しております。 実際に自分のソースに組み込んで動かすことができたのですが、 「年」の部分を変更しようとして苦しんでます。 質問の主旨とずれてしまって申し訳ないのですが、教えていただけると助かります。 書いていただいたjavascriptの中の var dateTime = $('#datetime').datetime({ ys: '2010', ye: '2014', の部分ですが、ysとyeを固定値ではなく、たとえば「現在年の10年前から10年後」に したい時、 ys: getyear()-10, ye: getyear()+10, などとすると、動きませんでした。 Javascriptの知識が少ないのでどう設定するのが正しいのかわからず…。 どのように記述するのが正しいのでしょうか。 すいませんが教えていただけますか。 よろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
普通に、javascript/ajaxをつかって、選択して進むごとにページを再読み込みして、順次ページが書き換えられたものを表示し、最後の段階で一覧をselectで提示すればよいかと思います。 日付をユーザーから設定しようとすると、閏年とか存在しないメニューが表示されてしまうので、あくまでサーバー側で処理すると良いでしょう。ディレクトリを階層だてておけば、すばやく簡単だと思います。 photo/ 1998/ |-- 01/ |-- 01/ |- 9801010630.jpg |- 9801010635.jpg |- 9801010650.jpg あとは処理が簡単なPATH_INFOを使かえば良いでしょう。
お礼
お礼が遅くなりまして申し訳ありません。 参考にさせていただきました。 ありがとうございました！
お礼
お礼が遅くなりまして申し訳ありません。 無事、理想通りのものを作成することができました！ 最後まで丁寧な説明、本当にありがとうございました。