CODEWITHSUNDEEP
javascriptjquery
privacymx
privacymx

Reputation: 103

JavaScript: format date to hour:minute:second day month day year

I'm getting the following result Sat Jul 17 2021 21:44:12 GMT-0700 (Pacific Daylight Time)

what I want is 21:44:12 Sat Jul 17 2021 

jQuery(document).ready(function() {
    var foo = jQuery('#foo');
  
    function updateTime() {
        var now = new Date();
        foo.val(now.toString());        
    }
  
    updateTime();
    setInterval(updateTime, 1000); // 5 * 1000 miliseconds
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" name="foo" type="text" value="" size="55" />

Upvotes: 1

Views: 135

Answers (4)

Salvino D&#39;sa
Salvino D&#39;sa

Reputation: 4506

Please avoid using moment.js as it increases page load time. You can use day.js instead. It is a Fast 2kB alternative to Moment.js with the same modern API.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>

<script>
$(function() {
  var foo = jQuery('#foo');

  function updateTime() {
    var now = dayjs().format("hh:mm:ss ddd MMM DD YYYY");
    foo.val(now);
  }

  updateTime();
  setInterval(updateTime, 1000);
});
</script>

<input id="foo" name="foo" type="text" value="" size="55" />

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28414

Using moment:

jQuery(document).ready(function() {
    var foo = jQuery('#foo');
    
    function updateTime() {
        var now = moment().format("hh:mm:ss ddd MMM DD YYYY");
        foo.val(now);        
    }
  
    updateTime();
    setInterval(updateTime, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<input id="foo" name="foo" type="text" value="" size="55" />

Upvotes: 1

Thomson Mixab
Thomson Mixab

Reputation: 657

You can separate out the time and date element, then join the time/date back.

jQuery(document).ready(function() {
    var foo = jQuery('#foo');
  
    function updateTime() {
        var now = new Date();
        var timeTmp = now.toLocaleTimeString(); 
        var dateTmp = now.toDateString();
        foo.val(timeTmp + " " + dateTmp);        
    }
  
    updateTime();
    setInterval(updateTime, 1000); // 5 * 1000 miliseconds
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" name="foo" type="text" value="" size="55" />

Upvotes: 1

flyingturtles
flyingturtles

Reputation: 903

jQuery(document).ready(function() {
  var foo = jQuery('#foo');

  function updateTime() {
    // An array of weeks
    let weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    // An array of months
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    let now = new Date()
    // Get hours
    let hours = now.getHours()
    // Get minutes
    let minutes = now.getMinutes()
    // Get seconds
    let seconds = now.getSeconds()
    // Get the day in number and use it to get a textual day
    let day = weeks[now.getDay()]
    // Get the month in number and use it to get a textual month
    let month = months[now.getMonth()]
    // Get the date
    let date = now.getDate()
    // Get full year
    let year = now.getFullYear()
    // If min/sec/hour are smaller than 10, add '0' to keep consistency
    if (minutes < 10) {
      minutes = '0' + minutes
    }
    if (seconds < 10) {
      seconds = '0' + seconds
    }
    if (hours < 10) {
      hours = '0' + hours
    }
    // Merge all of the above in a string
    let time = `${hours}:${minutes}:${seconds} ${day} ${month} ${date} ${year}`
    // Update the value with string
    foo.val(time);
  }

  updateTime();
  setInterval(updateTime, 1000); // 5 * 1000 miliseconds
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" name="foo" type="text" value="" size="55" />

Upvotes: 1

Related Questions