Search code examples
javascriptjquerydatetimepicker

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

Solution

  • 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>