- ベストアンサー
WEBショップの配送希望日のプルダウン
こんばんは。 タイトルの通り、ショップのカートにある配送希望日のプルダウン 例えば・・・ 「3日後から14日後の間で指定」としていたら プルダウンに今日（3月25日（水））から14日後までの日付が入ったプルダウンが表示されるようなselectボックスを作るにはどうすればよいでしょうか？ javascriptのカレンダーを取り入れようとしてみたのですが、どうにも上手く行かないので教えてください。
- bao-bab
- お礼率58% (28/48)
- JavaScript
- 回答数17
- ありがとう数11
- みんなの回答 （17）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
自分が書いたものは、読み込む順番に多分関係ない。 それと、顧客の使うパソコンの日付が狂ってるとおかしくなるよ！ <input type="hidden" id="today_from_server" name="配送日" value="2000/01/01"> の日付をサーバー側で書き込まないと・・・。 htmlで「たいへんよくできました」が表示されるようにね！^^;
その他の回答 (16)
メールフォームcgiがどうなっているかわからない。 hidden ではなくtextにして、display:noneにするとか？ なんとも・・・
お礼
display:noneにしてみたり色々試してみましたが、見たままの値をCGIに渡すことができません。 _pipi_さんの書いて下さったscriptをすっっっごく使いたいけど諦めるより他ないのでしょうか・・・
補足
textにしてみたときは2009/2/26と表示されたテキストボックスが表示されました。display:noneですね。 それもしてみます。 CGIはフリーのahrefのものでフォームのname定義されたものを確認画面・メールに表示するタイプのものです。 それで、現段階で私がしていたのはselctで月・日を選べるようにしていたのですが、それだと確認画面やメールで月と日がばらばらに表示されるのです。当たり前なのですが。 ○月○日と合成させたものを表示させることは出来ますが、ばらばらの値までも表示されてしまうので、どうすれば良いかと考えあぐね、ご質問差し上げたしだいです。 _pipi_さんのご回答をヒントにもう少し調べてみます。
スクリプト側の補正をしなくてすむように変更 日付の区切り文字の追加 value="" にしました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>SetSelectTag</title> <body> <form> <p> <input type="hidden" id="today_from_server" value=""> <select id="after_day"> <option value="">配送希望日</option> <option value="3">3日後</option> <option value="4">4日後</option> <option value="5">5日後</option> <option value="6">6日後</option> <option value="7">7日後</option> <option value="8">8日後</option> <option value="9">9日後</option> <option value="10">10日後</option> <option value="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> </select> </p> </form> <script type="text/javascript"> //@cc_on //全角空白はタブまたは半角空白に置き換えのこと (function (init) { /*@if(@_jscript) document.attachEvent && attachEvent('onload', init); @else@*/ document.addEventListener && addEventListener('load', init, false); /*@end@*/ })(function () { var today = new Date; var d, o, w; var date_val = []; var date_str = document.getElementById('today_from_server').value; var count = 1; var the_options = document.getElementById('after_day').options; if (date_str) { date_val = date_str.split(/[\/\- ]/g); --date_val[1]; } else { date_val = [today.getFullYear(), today.getMonth(), today.getDate() ]; document.getElementById('today_from_server').value = date_val.join('/'); } while (o = the_options[count++]) { d = new Date(date_val[0], date_val[1], parseInt(date_val[2]) + parseInt(o.value)); w = d.getDay(); o.text = (d.getMonth() + 1) + '月' + d.getDate() + '日(' + '日月火水木金土'.substr(w,1) + ')'; o.style.backgroundColor = '#'+['fdd','fff','ddf'][1-!w+(w==6)] } }); </script>
補足
素晴らしいですね。表示された途端ため息が出ました。 途中不快な気分を味あわせてしまいましてすみません。 しかし、hiddenの場合メールフォームcgiだと確認画面やメールに表示されませんよね。（実行してみました。分からないけれども、nameを与えたりするとおかしなことになってしまいました。） 何か方法はありますか？
何日後？ 実行しもしないで発言しているのですか？ ちゃんと書き換えてます。 自分も勉強している身なので、たいそうなことも言えませんし、 自分の書いたコードが、あなたのためになるかどうかなど、 私には関係ありません。 javascriptはページを閲覧したパソコンの時計を基準にしています なので、type=hidden のところにサーバー側の時間を "年/月/日" で 指定しておかないと、ずれる可能性があります その部分の記載がなければスクリプトが代替処理をしています あくまでもjavascriptが動作しない環境のことをちょっとだけ 考えました。
補足
いえ、実行してみたのです。 そうしたら○日後と表示されていたので。 私の無知から来たことで、大変申し訳ありませんでした。
- askaaska
- ベストアンサー率35% (1455/4149)
私は答えのコードは書かないわよ。 書くのはあなた。 添削ならいくらでもしてあげるけど。 あせっている暇があったら１行でもコーディングするのよ。 脳汁出し切って考えるの。 そうやって努力したことって のちのちすごく役に立つわ。 他人に教わってもそのときだけ。 期限が何なのか知らないけど 自分のために勉強するんじゃないの？ 期限のために勉強するならやめてしまいなさい。 なんてえらそうなことは今だからいえるんだけどね。 教えたサイト http://www.red.oit-net.jp/tatsuya/java/gyouji2.htm には今日の日付の出し方、明日の日付の出し方が書かれているわ。 ということは14日後まで出せるわよね？ あとはプルダウンをJavaScriptで記述するだけよ。 <option>の入れ替えは http://blog.justoneplanet.info/2007/12/11/select%E3%81%AEoption%E3%82%92javascript%E3%81%A7%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88%E3%82%88%E3%81%86/ この辺りを参考にしてはどおかしら。
補足
確かに。 私も同じことを言うでしょうから、納得できます。 参考URL（特にoptionをjavascriptで入れ替えるなんてことが出来るんですね）で勉強します。 どのみち勉強しなくてはならなくなってくるだろうと思いますので。 今回は本当に時間が限られているため、何とか間に合わせることに専念します。 今後修正が出来るので、勉強後、さらにフォームを磨いていきます。
//@cc_on (function (init) { /*@if(@_jscript) document.attachEvent && attachEvent('onload', init); @else@*/ document.addEventListener && addEventListener('load', init, false); /*@end@*/ })(function () { var today = new Date; var d, o, w; var date_val = []; var date_str = document.getElementById('today_from_server').value; var the_date; var start = 3; var period = 14; var count; var the_options = document.getElementById('after_day').options; if (date_str) { date_val = date_str.split(/[\/]/g); --date_val[1]; } else { date_val = [today.getFullYear(), today.getMonth(), today.getDate() ]; document.getElementById('today_from_server').value = date_val.join('/'); } for (count = 0; count <= period - start; count++) { d = new Date(date_val[0], date_val[1], parseInt(date_val[2]) + count + start); o = the_options[count + 1]; w = d.getDay(); o.text = (d.getMonth() + 1) + '月' + d.getDate() + '日(' + '日月火水木金土'.substr(w,1) + ')'; o.style.backgroundColor = '#'+['fdd','fff','ddf'][1-!w+(w==6)] } }); </script> <input type="hidden" id="today_from_server" value="1996/3/4"> <select id="after_day"> <option value="">配送希望日</option> <option value="3">3日後</option> <option value="4">4日後</option> <option value="5">5日後</option> <option value="6">6日後</option> <option value="7">7日後</option> <option value="8">8日後</option> <option value="9">9日後</option> <option value="10">10日後</option> <option value="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> </select>
補足
_pipi_さん、有難うございます。 ただ当初の質問の通り、○日後という表示でなく、3日後から14日後までの日付"を表示させたいのです。 お手を煩わせ申し訳ありませんが、お願いいたします。
- askaaska
- ベストアンサー率35% (1455/4149)
まず 今日の日付、明日の日付の出し方の参考 http://www.red.oit-net.jp/tatsuya/java/gyouji2.htm もちろん単に25に+1ずつしていってもいいけど 月の変わり目とかうるう年とか面倒だと思うので このやり方をすればそこを考慮しなくてよくなるね。 もちろん月の変わり目とかをきちんと判定してやるのが 軽い処理ではあるんだけど ミスが起こるよりはいいと思うわ。
補足
確かに・・・ こちらのサイトは私も何度か拝見しております。 使えるなぁと思うのですが。 ただ全くいじったことがないjavascriptで、期限を間近にして勉強がはかどらず焦っておりますT_T
- 1
- 2
お礼
今、スクリプトと<input>～</select>の部分だけ取り出して実行してみて、初めて_pipi_さんが仰っていることが分かりました。 回り道しました。 こんなやり方があることに今気づきました。 これだから・・・と思われることでしょうT_T これだけ見ると本当に、どちらにもnameを入れてもきちんと表示されますね！ ということは、CGI配布先に問い合わせた方が良いのでしょうか？ javascriptの結果が反映されないとか何とかで。
補足
サーバー側でしているんですよT_T チェック結果は309組のエラー！ びっくりしてよく見たら、色やテキストボックスのサイズなど実に細かくチェックしてくれていまして^^;