从文本框中的日期对象中提取并限制时间

我到处搜索过，但找不到这个特定问题的答案。我正在做一个比萨订购网站，我们需要有一个文本字段，以便客户可以自己手动输入时间，而不是有一个简单的下拉选项用于提货或交货时间。然后我需要通过使用DATE对象来确认时间值，以确保它在上午6点到晚上11点之间。时间必须包括上午或下午。这是我到目前为止有：从文本框中的日期对象中提取并限制时间

<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

来源

2016-11-24 K. Lynn

如果您正在使用HTML5，你可以使用一个time输入，如：

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

More information on HTML5 input types。

如果您不使用HTML5，则必须编写一些脚本，或者使用许多可自由使用的jquery time picker plugins之一。

来源

2016-11-24 01:00:41

我刚开始这样做，但他说格式不允许。他希望客户能够实际输入“11:18 AM”，并使用日期对象对某些if语句进行验证。 –

从文本框中的日期对象中提取并限制时间

回答

相关问题