Format date and time in refresh

Question

I want to use the following script to refresh the time every second. Works fine, but I want it to output the format like this:

October 06 - 13:38:04.

How do you do that?

   

 var timestamp = '<?=time();?>';
    function updateTime(){
     const firstOption = {month: 'long', day: 'numeric'};
 const secondOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
$('#time').html(new Date(timestamp).toLocaleDateString("en-NL", firstOption) + " - " + new Date(timestamp).toLocaleTimeString("en-NL", secondOptions));
      timestamp++;
    }
    $(function(){
      setInterval(updateTime, 1000);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="time"></p>

Please do some research on basic issues like this, instead of asking plain “how i do dat” questions. — 04FS, Oct 06 '20 at 11:52
Typing “javascript date format” into Google could have already led you to https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date in no time. — 04FS, Oct 06 '20 at 11:53
Then please mention what you found in your research next time, and show what you tried. Otherwise, we have no way to differentiate this, from a question where the person asking it made no effort whatsoever, and that will get you downvotes. — 04FS, Oct 06 '20 at 12:05
Thanks for that reaction, will keep that in mind. I googled this everywhere also found that link. But I am new to JS and could not get any of the sollution to be implented to that script i found by my first google attempt. — newtocss, Oct 06 '20 at 12:10
Thanks. See the updated question. Invalid time it says. Dont know what goes wrong :( — newtocss, Oct 06 '20 at 14:18

Joseph Utulu · Accepted Answer · 2020-10-06T13:49:39.127

1

Try this:

 const firstOption = {month: 'long', day: 'numeric'};
 const secondOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
$('#time').html(new Date(timestamp).toLocaleDateString("en-NL", firstOption) + " - " + new Date(timestamp).toLocaleTimeString("en-NL", secondOptions));

Read more about it here.

edited Oct 06 '20 at 13:49

answered Oct 06 '20 at 12:12

Joseph Utulu

206
9

Thanks. Tried it like this. It wont work. Gives the error : Uncaught TypeError: Date(...).toLocaleDateString is not a function `` – newtocss Oct 06 '20 at 12:32
Check the updated answer, I forgot to add the "new" keyword. – Joseph Utulu Oct 06 '20 at 12:33
Thanks for the update. The formating works :). But it is now not counting secconds. – newtocss Oct 06 '20 at 12:52
I just tested it, seconds count fine. check your code. Remember a second is 1000 milliseconds, so your additions for a second should be 1000 and not 1 – Joseph Utulu Oct 06 '20 at 13:01
Here is the code i use now. I am also searching on google how to show the ''Dutch'' time. In your code it is specified as en-US. But as i said with this it wont update the seconds. – newtocss Oct 06 '20 at 13:22
No your code is fine, just change timestamp++ to timestamp +=1000 – Joseph Utulu Oct 06 '20 at 13:24
Thanks for your help so far. I tried what you said, and what i allready did. I changed the code and updated the question. That way i could run the Snippet. It says invalid date. Also i need it to be in the dutch time. – newtocss Oct 06 '20 at 13:37

score 0 · Answer 2 · answered Oct 06 '20 at 12:02

Simple function for formating your date.

function dateToString(/* add timestamp parameter if you want */) {
  
  var d = new Date(/* timestamp parameter here */);

  var months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'October',
    'November',
    'December',
  ]
  
  var month = months[d.getMonth() - 1];
  var date = (d.getDate() < 10) ? "0" + d.getDate() : d.getDate();
  var hours = d.getHours(),
      minutes = d.getMinutes(),
      seconds = d.getSeconds();
  
  var time = (hours < 10 ? "0" + hours : hours) + ':' + (minutes < 10 ? "0" + 
minutes : minutes) + ':' + (seconds < 10 ? "0" + seconds : seconds);
  
  return month + ' ' + date + ' - ' + time;
}

dateToString(/* pass timestamp argument here */);

score 0 · Answer 3 · answered Oct 06 '20 at 12:08

Afaik PHP's time function return a unix timestamp and you're looking for an ES5 solution. This might help you.

const datetime = 1601984483;

var padStart = function(str, length) {
    while (str.toString().length < length)
        str = "0" + str;
    return str;
}

var format = function (timestamp) {
    var date = new Date();
    var d = {
        M: date.toLocaleString('default', { month: 'long' }),
        d: padStart(date.getDate(), 2),
        h: padStart(date.getHours(), 2),
        m: padStart(date.getMinutes(), 2),
        s: padStart(date.getSeconds(), 2)
    };
    return [[d.M, d.d].join(' '), [d.h, d.m, d.s].join(':')].join(' ');
}

console.log(format(datetime));

Format date and time in refresh

3 Answers3