HTML input field to enter time with hours minutes and am pm

Rohit Bajaj
Rohit Bajaj used Ask the Experts™
on
HI,
I want to make a user enterable time field in html page. so that user can select the hours minutes and am pm etc.
from drop down...
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Fixer of Problems
Most Valuable Expert 2014
Commented:
Here you go.
<select name="selHour">
            <option selected="selected" value="">Select Hour</option>
            <option value="00">00</option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select name="selMin">
            <option selected="selected" value="">Select Minute</option>
            <option value="00">00</option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</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>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
            <option value="32">32</option>
            <option value="33">33</option>
            <option value="34">34</option>
            <option value="35">35</option>
            <option value="36">36</option>
            <option value="37">37</option>
            <option value="38">38</option>
            <option value="39">39</option>
            <option value="40">40</option>
            <option value="41">41</option>
            <option value="42">42</option>
            <option value="43">43</option>
            <option value="44">44</option>
            <option value="45">45</option>
            <option value="46">46</option>
            <option value="47">47</option>
            <option value="48">48</option>
            <option value="49">49</option>
            <option value="50">50</option>
            <option value="51">51</option>
            <option value="52">52</option>
            <option value="53">53</option>
            <option value="54">54</option>
            <option value="55">55</option>
            <option value="56">56</option>
            <option value="57">57</option>
            <option value="58">58</option>
            <option value="59">59</option>
        </select>
        <select name="AMPM">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
        </select>

Open in new window

Moussa MokhtariEnterpreneur
Top Expert 2016

Commented:
Use HTML default type
<input type="time" name="timepicker">
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
HTML5 type="time" is not supported in Firefox or Internet Explorer.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Moussa MokhtariEnterpreneur
Top Expert 2016

Commented:
Thanks Dave I was unaware of that
Most Valuable Expert 2011
Top Expert 2016
Commented:
What server-side technology will you use to process the form after it is uploaded?  If you choose PHP, you can follow these design principles.

Old procedural version:
http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL-Procedural-Version.html

Modern object-oriented version:
http://www.experts-exchange.com/articles/20920/Handling-Time-and-Date-in-PHP-and-MySQL-OOP-Version.html
RobOwner (Aidellio)
Most Valuable Expert 2015
Commented:
You can always spruce it up with a datepicker like http://eternicode.github.io/bootstrap-datepicker/

Author

Commented:
i am using spring mvc on server side
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
What about for the client? Any of the options we've suggested ok?

Author

Commented:
yes they seem fine...i am using jquery js ..will try these options and post back

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial