2016-11-24 8 views
0

私はどこでも検索しましたが、私が持っているこの特定の質問に対する回答は見つかりませんでした。 私はピザ注文ウェブサイトを作っています。ピックアップまたは配送フィールドの時間のための単純なドロップダウンオプションを使用する代わりに、顧客が手動で時間を入力できるようにテキストフィールドが必要です。次に、DATEオブジェクトを使用して午前6時から午後11時の間であることを確認して、時間の値を検証する必要があります。時間にはamまたはpmを含める必要があります。ここ は、私がこれまで持っているものです。テキストボックス内の日付オブジェクトからの時間の抽出と制限

<INPUT id="MyId" name="MyName" type="time"> 

More information on HTML5 input types:あなたはHTML5を使用している場合は、このようなtime入力を、使用することができます

<html> 
    <head> 
     <title> 
      Pizza Form 
     </title> 
    </head> 

    <body> 

    <script> 
    //Creating the function to extract the time 
    function getTime() { 
     var d = new Date(); 
     d.setHours(); 
     document.getElementById("pickTime").innerHTML = d; 
    } 

    } 

    </script> 
     <h1>Pizza Order Form</h1> 
     <form> 
      <fieldset><Legend>Is this for delivery or carryout?</legend> 
       <table > 
        <tr> 
         <td><input type="radio" name="DoC"    id="forDelivery">Delivery <font color="red" size="1.px">extra 30% of total</font></input></td> 
       <td><input type="radio"name="DoC" id="forCarry">Carryout</td> 
      </tr> 
      <tr> 
       <td>Delivery/Pickup Time</td> 
       <td><input type="text" id="pickTime" value= "" onkeypress="return getTime()"> <font color="red" size="1.px" >Time should be between 6am and 11pm</font></td> 

      </tr> 
     </table> 
    </fieldset> 

    <fieldset><legend>Customer Info</legend> 

     <table > 
      <tr> 
       <td>First and Last Name</td> 
       <td><input type="text" id="flname"></td> 
      </tr> 
      <tr> 
       <td align="left">Address<br/ ><font color="red" size="1.px" id="address">Not required if takeout</font></td> 
       <td><textarea rows="4" cols="50" id="address"></textarea></td> 
      </tr> 
      <tr> 
       <td>Phone Number</td> 
       <td><input type="text" id="phonenumber"></td> 
      </tr> 
      <tr> 
       <td>Email Address</td> 
       <td><input type="text" id="email"></td> 
      </tr> 
     </table> 
    </fieldset> 

    <fieldset><legend>Choose Size and Crust</legend> 
      <table style="width:100%" > 
       <tr> 
        <th align="left">Hand Tossed</th> 
        <th align="left">Handmade Pan</th> 
        <th align="left">Crunchy Thin crust</th> 
        <th align="left">Brooklyn Style</th> 
       </tr> 
       <tr> 
        <td><input type="radio"name="type" id="SHT" value="8">Small (10"-$8)</td> 
        <td><input type="radio"name="type" id="MHP" value"10">Medium (12"-$10)</td> 
        <td><input type="radio"name="type" id="MCTC" value="10">Medium (12"-$10)</td> 
        <td><input type="radio"name="type" id="LBS" value="13">Large (14"-13$)</td> 
       </tr> 
       <tr> 
        <td><input type="radio"name="type" id="MHT" value="9">Medium (12"-$9)</td> 
        <td></td> 
        <td><input type="radio"name="type" id="LCTC" value="12">Large (14"-$12)</td> 
        <td><input type="radio"name="type" id="XLBS" value="15">X-Large (16"-$15)</td> 
       </tr> 
       <tr> 
        <td><input type="radio"name="type" id="LHT" value="10">Large (14"-$10)</td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td><input type="radio"name="type" id="XLHT" value="11">X-Large (16"-$11)</td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
      </table> 
    </fieldset> 

    <fieldset><legend> Choose Cheese & Sauce</legend> 
     <table > 
      <tr> 
       <td width="58%">Cheese?</td> 
       <td>Sauce?</td> 
      </tr> 
      <tr> 
       <td> 
        <select size="6"> 
         <option id="nocheese" value="0">No Cheese</option> 
         <option id="lightcheese" value="1">Light - $1.00</option> 
         <option id="normalcheese" value="1.25">Normal - $1.25</option> 
         <option id="extracheese" value="1.5">Extra - $1.50</option> 
         <option id="dblcheese" value="1.75">Double - $1.75</option> 
         <option id="tplcheese" value="2">Triple - $2.00</option> 
        </select> 
       </td> 
       <td valign="top"> 
        <select size="4"> 
         <option id="nosauce" value="0">No Sauce</option> 
         <option id="lightsauce" value="0.5">Light - $0.50</option> 
         <option id="normalsauce" value="1">Normal - $1.00</option> 
         <option id="extrasauce" value="1.5">Extra - $1.50</option> 
        </select> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 

    <fieldset><legend> Toppings (You can choose more than one - $2 each)</legend> 
     <table > 
      <tr> 
       <td width="50%" 
       ><input type="checkbox" id="pepporoni" value="2">Pepporoni</td> 
       <td><input type="checkbox" id="blackolive" value="2">Black Olives</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="mushroom" value="2">Mushrooms</td> 
       <td><input type="checkbox" id="greenpepper" value="2">Green Peppers</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="onions" value="2">Onions</td> 
       <td><input type="checkbox">Pineapple</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="sausage" value="2">Sausage</td> 
       <td><input type="checkbox" id="spinach" value="2">Spinach</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="bacon" value="2">Bacon</td> 

     </table> 
    </fieldset> 

    <button type="submit" value="Submit">Submit</button> 
    <button type="reset" value="Reset">Reset</button> 
</form> 

    </body> 
    </html> 

Here's what the website looks like so far

答えて

0

HTML5を使用していない場合は、少しスクリプトを書くか、自由に利用できるjquery time picker pluginsのいずれかを使用する必要があります。

+0

私はこれを最初にしましたが、フォーマットは許可されていないと言いました。彼は文字通り顧客が「11時18分午前」に入力し、日付オブジェクトを使用して何らかのif文で検証することを希望しています。 –

関連する問題