JSFiddle - React, Tailwind, and code Playground
HTML
<div id="yourTimeField"></div>
JavaScript
$(document).ready(function(){
var d = new Date();
var formatted_time = time_format(d);
$('#yourTimeField').text(formatted_time);
});
/**
* This method ensures to format a time of a date object using two digits.
*
* @param {Date} d - Date object like new Date()
* @returns {String} time string hh:mm:ss
*/
function time_format(d) {
hours = format_two_digits(d.getHours());
minutes = format_two_digits(d.getMinutes());
seconds = format_two_digits(d.getSeconds());
return hours + ":" + minutes + ":" + seconds;
}
/**
* This method helps to format a string of two digits.
* In case the given number is smaller than 10, it will add a leading zero,
* e.g. 08 instead of 8
*
* @param {Number} n - a number with one or two digits
* @returns {String} String with two digits
*/
function format_two_digits(n) {
return n < 10 ? '0' + n : n;
}