LOTUSMS LOTUSMS - 2 months ago 7
jQuery Question

Removing the colon from 24 hrs format time in jquery datepicker

I need to resolve an issue that has been bugging my bug list for a while but can't find anything solid in Google. All I want is to remove the colon from the time so I can display it in REAL military time.

So, this is wrong --> 13:25 hrs

This is right --> 1325 hrs

I am using Jquery Date Picker form the Jquery UI library and

datetimepicker-addon.js
from here

HTML

<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>


JS

$(function(){
$("#my_date").datetimepicker({
timeFormat: "HH:mm 'hrs'",
showButtonPanel: false
});
});


Here is a handy dandy CODEPEN

I appreciate the help

Answer

In the timeFormat of the datetimepicker remove the colon

$(function(){
	// when the document has loaded 
	// attach the datetimepicker
	$("#my_date").datetimepicker({
		timeFormat: "HHmm 'hrs'",
		showButtonPanel: false
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="container">
	<input type="text" name="my_date" id="my_date" value="" />
</div>