HTML Input Type Time Without AM-PM and With Min-Max
In this blog post i will step through on how to create an HTML input type without AM-PM and with Min Max Value.
Normally, to create an Time Input ,we would use the HTML Code shown below.
<input type='time'>
Date Time Display
But What if we would like the input to only be set in 24 hour format and without AM -PM
There are a 2 ways to Solve this
1st Solution
First approach is to either remove the AM- PM input using JavaScript Or jQuery. I found this Solution Here on Stack OverFlow
The advantage of this solution is, you can maintain the Date Format String and it can be later to be passed on to the “new Date() ” object easily. While the Dis- advantage is , you will need to write a jQuerry method to force remove the AM-PM display which make things turn out to be more complicated . More over there is a problem on this solution as well, where if you want to implement 24 Hour format input, you will need to write another method to force create it.
2nd Solution
The Second approach is more straight forward and less Complicated , only HTML Code is involved , there are no complicated jQuery and JavaScript Integration.
The Advantage is , you only use HTML Code and Some CSS Styling . The Dis-advantage , is , you will need to use JavaScript Code to rebuild the Date String later before passing it into the “new Date() ” object.
In Order to do this
Step 1 -> We will need to create 3 <input > box for Hour / Minute / Seconds
Step 2 -> Assign a Class name to all the 3 Input , any name will do . In this Context my Class Name is assign as “in_put”
Step3 -> For hour input Box assign max =23 , while for minute / second input Box assign max =59 . All Input box ” min” assign min =0
Step4 -> Finally i will wrap all these input box under Fieldset tag , to group them as a single unit
Step6 -> Styling Individual Input Box for hour / minute / second.
Step7 -> Background Color is set as white / display to be set as inline-reflex , /lastly set the border / color / width according to your needs
Step8 -> Styling the Fieldset, / dsiplay Set as inline-block , / Set border-radius / width / border according to your needs.
The Code as below
<style type="text/css">
fieldset {
border-radius: 5px;
width: max-content;
border: 1px solid #D4D4D5;
display: inline-block;
}
.in_put{
background-color: white;
display: inline-flex;
border: 1px solid #ccc;
color: #555;
width :90px;
}
</style>
<body>
<p>Date Time Display</p>
<fieldset>
<legend>HH:MM:SS:FF</legend>
<div>
<input class="in_put" id="hh_1" type="number" min="0" max="23" placeholder="00" value=0 >:
<input class="in_put" id="mm_1" type="number" min="0" max="59" placeholder="00" value=0 >:
<input class="in_put" id="ss_1"type="number" min="0" max="59" placeholder="00" value=0 >
</div>
</fieldset>
</body>
Output ———->
Date Time Display
Check out how to create a Table using HTML
Leave a Reply