HTML Input Type Time Without AM-PM and With Min-Max

HTML Input Type Time Without AM-PM and With Min-Max

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>

&nbsp;


<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

HH:MM:SS:FF
: :

Check out how to create a Table using HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

fourteen + eighteen =