営業時間および営業日（フォーム選択）

可能な限り少ないコードを使用して、店舗が開いている時間と日をユーザーが表示できるように、フォームを作成したいと考えています。

時間ピッカーを使用して、時間から時間を選択することができます。私が表示したい

：

月曜日

火曜日

水曜日

木曜日

金曜日

土曜日

日曜日

から回を開くとしての、そして近い、チェックボックス、毎日の隣に

しかし、それは、これはHTMLのヒープを使用するコーディングと思われる、それを符号化する彼らのクリーンな方法です。また、その値が提出されないように、一日分のエントリーをディスカウントするクローズチェックボックスのコーディング方法も不明です。以下

コード：月曜日

<label>Monday: </label><select name="from" id="from"> 
    <option value="06:00">6:00 AM</option> <option value="06:30">6:30 AM</option> <option value="07:00">7:00 AM</option> <option value="07:30">7:30 AM</option> <option value="08:00">8:00 AM</option> <option value="08:30">8:30 AM</option> <option value="09:00" selected>9:00 AM</option> <option value="09:30">9:30 AM</option> <option value="10:00">10:00 AM</option> <option value="10:30">10:30 AM</option> <option value="11:00">11:00 AM</option> <option value="11:30">11:30 AM</option> <option value="12:00">12:00 PM</option> <option value="12:30">12:30 PM</option> <option value="13:00">1:00 PM</option> <option value="13:30">1:30 PM</option> <option value="14:00">2:00 PM</option> <option value="14:30">2:30 PM</option> <option value="15:00">3:00 PM</option> <option value="15:30">3:30 PM</option> <option value="16:00">4:00 PM</option> <option value="16:30">4:30 PM</option> <option value="17:00">5:00 PM</option> <option value="17:30">5:30 PM</option> <option value="18:00">6:00 PM</option> <option value="18:30">6:30 PM</option> <option value="19:00">7:00 PM</option> <option value="19:30">7:30 PM</option> <option value="20:00">8:00 PM</option> <option value="20:30">8:30 PM</option> <option value="21:00">9:00 PM</option> <option value="21:30">9:30 PM</option> <option value="22:00">10:00 PM</option> 
    </select> 
    <label>to</label> 
    <select name="to" id="to"> 
    <option value="06:00">6:00 AM</option> <option value="06:30">6:30 AM</option> <option value="07:00">7:00 AM</option> <option value="07:30">7:30 AM</option> <option value="08:00">8:00 AM</option> <option value="08:30">8:30 AM</option> <option value="09:00">9:00 AM</option> <option value="09:30">9:30 AM</option> <option value="10:00">10:00 AM</option> <option value="10:30">10:30 AM</option> <option value="11:00">11:00 AM</option> <option value="11:30">11:30 AM</option> <option value="12:00">12:00 PM</option> <option value="12:30">12:30 PM</option> <option value="13:00">1:00 PM</option> <option value="13:30">1:30 PM</option> <option value="14:00">2:00 PM</option> <option value="14:30">2:30 PM</option> <option value="15:00">3:00 PM</option> <option value="15:30">3:30 PM</option> <option value="16:00">4:00 PM</option> <option value="16:30">4:30 PM</option> <option value="17:00" selected>5:00 PM</option> <option value="17:30">5:30 PM</option> <option value="18:00">6:00 PM</option> <option value="18:30">6:30 PM</option> <option value="19:00">7:00 PM</option> <option value="19:30">7:30 PM</option> <option value="20:00">8:00 PM</option> <option value="20:30">8:30 PM</option> <option value="21:00">9:00 PM</option> <option value="21:30">9:30 PM</option> <option value="22:00">10:00 PM</option> 
    </select> 
    <input type="checkbox" name="closed" value="closed"> 
<font size="-1"><span>Closed</span>

フィドルのために：それはすべての用途にもよるがhttp://www.jsfiddle.net/mf2PB/

出典

2011-01-14 422

使用しているサーバー側の言語を教えてください。なぜサーバー側でHTMLを生成しないのですか？ –

JSのUIライブラリを使用しても構わない場合は、さまざまな日付/時刻のピッカーがあります。 [RightJS]（http://rightjs.org/）のようなものはどうですか？ [calendar-with-time demo]（http://rightjs.org/ui/calendar/demo#date-with-trigger）をご覧ください。 –

私たちはPHPを使うことができましたが、私はPHPの専門家です。 – 422

私は、いくつかのことを考えることができます。実際には、これはすべてHTML内にあるため、最終的にはほとんどの人が見ることのできないテキストです。

JavaScriptを使用するとオプションが設定されますが、JavaScriptのサポートに依存します。実際には、最初のhtmlを小さくするだけですが、JavaSciptコードとDOM要素を追加すると同じになります。
http://www.jsfiddle.net/urQc4/
サーバーサイドスクリプトでこれを行います。時/分に
スプリットのオプション：
http://www.jsfiddle.net/q4KcM/

限り、閉じたチェックボックスが選択されている場合、あなたは、フォームの処理であることを行う必要があります無効にするなど、または前処理スクリプト内で実行されます。これはJavaScriptです。

出典

2011-01-14 23:19:57

実際には、これは非常に直感的なやり方であり、きれいに見えます。ありがとう、私はdeffoこのコードを使用します。 – 422

JavaScript/jQuery生成の例を追加しました。 http://www.jsfiddle.net/urQc4/ –

JeffはFU * $％＆NGです。ブリリアント!!!!!!本当にありがとう！！！ – 422

あなたはtimes.phpを作成し、そこに次のコードを投げることができます：

<?php 
$openTimes = "<option value=\"06:00\">6:00 AM</option> 
<option value=\"06:30\">6:30 AM</option> 
<option value=\"07:00\">7:00 AM</option> 
<option value=\"07:30\">7:30 AM</option> 
<option value=\"08:00\">8:00 AM</option> 
<option value=\"08:30\">8:30 AM</option> 
<option value=\"09:00\" selected>9:00 AM</option> 
<option value=\"09:30\">9:30 AM</option> 
<option value=\"10:00\">10:00 AM</option> 
<option value=\"10:30\">10:30 AM</option> 
<option value=\"11:00\">11:00 AM</option> 
<option value=\"11:30\">11:30 AM</option> 
<option value=\"12:00\">12:00 PM</option> 
<option value=\"12:30\">12:30 PM</option> 
<option value=\"13:00\">1:00 PM</option> 
<option value=\"13:30\">1:30 PM</option> 
<option value=\"14:00\">2:00 PM</option> 
<option value=\"14:30\">2:30 PM</option> 
<option value=\"15:00\">3:00 PM</option> 
<option value=\"15:30\">3:30 PM</option> 
<option value=\"16:00\">4:00 PM</option> 
<option value=\"16:30\">4:30 PM</option> 
<option value=\"17:00\">5:00 PM</option> 
<option value=\"17:30\">5:30 PM</option> 
<option value=\"18:00\">6:00 PM</option> 
<option value=\"18:30\">6:30 PM</option> 
<option value=\"19:00\">7:00 PM</option> 
<option value=\"19:30\">7:30 PM</option> 
<option value=\"20:00\">8:00 PM</option> 
<option value=\"20:30\">8:30 PM</option> 
<option value=\"21:00\">9:00 PM</option> 
<option value=\"21:30\">9:30 PM</option> 
<option value=\"22:00\">10:00 PM</option>"; 

$closeTimes = "<option value=\"06:00\">6:00 AM</option> 
<option value=\"06:30\">6:30 AM</option> 
<option value=\"07:00\">7:00 AM</option> 
<option value=\"07:30\">7:30 AM</option> 
<option value=\"08:00\">8:00 AM</option> 
<option value=\"08:30\">8:30 AM</option> 
<option value=\"09:00\">9:00 AM</option> 
<option value=\"09:30\">9:30 AM</option> 
<option value=\"10:00\">10:00 AM</option> 
<option value=\"10:30\">10:30 AM</option> 
<option value=\"11:00\">11:00 AM</option> 
<option value=\"11:30\">11:30 AM</option> 
<option value=\"12:00\">12:00 PM</option> 
<option value=\"12:30\">12:30 PM</option> 
<option value=\"13:00\">1:00 PM</option> 
<option value=\"13:30\">1:30 PM</option> 
<option value=\"14:00\">2:00 PM</option> 
<option value=\"14:30\">2:30 PM</option> 
<option value=\"15:00\">3:00 PM</option> 
<option value=\"15:30\">3:30 PM</option> 
<option value=\"16:00\">4:00 PM</option> 
<option value=\"16:30\">4:30 PM</option> 
<option value=\"17:00\" selected>5:00 PM</option> 
<option value=\"17:30\">5:30 PM</option> 
<option value=\"18:00\">6:00 PM</option> 
<option value=\"18:30\">6:30 PM</option> 
<option value=\"19:00\">7:00 PM</option> 
<option value=\"19:30\">7:30 PM</option> 
<option value=\"20:00\">8:00 PM</option> 
<option value=\"20:30\">8:30 PM</option> 
<option value=\"21:00\">9:00 PM</option> 
<option value=\"21:30\">9:30 PM</option> 
<option value=\"22:00\">10:00 PM</option>"; 
?>

そして、あなたのページの上部に<?php include('times.php'); ?>を使用しています。これにより、htmlページを乱雑にすることなく、同じオプション値を繰り返し使用することができます。だからあなたのフォームは次のようになります。

<label>Monday: </label> 

<select name="from" id="from"> 
    <?php echo $openTimes; ?> 
</select> 

<label>to</label> 

<select name="to" id="to"> 
    <?php echo $closeTimes; ?> 
</select>

これは、プロジェクトのニーズに合うかどうかは知りませんが、これはHTMLコードをクリーンアップするための確実な方法である - それは、PHPが最適です何です！

当然ながら、このモデルでは、より多様性が必要な場合（別の日に異なる時間オプションが必要な場合など）は、さらに改訂する必要がありますが、おそらくこれが役立ちますか？私はあなたが、フォームの処理/検証のために、 "from"と "to"だけでなく、毎日ユニークな名前を必要とすると思います。

出典

2011-01-14 23:39:32 jlmakes

これは99％完璧に近いですが、好ましい答えとして選択されています。私が感じる問題は、各要素の恒常的なid、曜日と時刻の作成です。それは私を困惑させ、それはまだです。コードを何度も繰り返すことなく、私はこの問題を解決することができません。どうもありがとう。 – 422

からidを渡して、PHPループを使用することができます。その後、毎日ループ変数を割り当て、この方法でループを繰り返し、毎日の日と時間を吐き出し、それぞれが独自のIDを持っていますか？どのようにそのthololololをコード化するのかわからない – 422

私は単純なループを行うためにPHPを単純化するだろう。あなたが何かを変更する必要がある場合は、あなたに多くの時間を節約します。 –

また、ユーザーが「午前6時〜午後7時」などの項目を入力できる単純なテキスト入力フィールドと、時間範囲が有効かどうかを確認するサーバー側コードを使用することもできます。ユーザーにとって使いやすくするには、範囲と48の可能なステップでjQuery UI Sliderを使用します。

出典

2011-08-30 13:06:00 chiborg

営業時間および営業日（フォーム選択）

答えて

関連する問題