How to get current date and time in a specific format using javascript

Question

Hi guys I'm new to JavaScript. I'm trying to get the Date and Time in a non-editable textbox in this format: (e.g. 7 October 2022 Friday 10:47). The content is the current date or today’s date which will change every day.

Currently these are my codes:

function getDate()
        {
        
            const date = new Date();
            
            const months = [ "January",
                            "February",
                            "March",
                            "April",
                            "May",
                            "June",
                            "July", 
                            "August",
                            "September",
                            "October",
                            "November",
                            "December" ];
                            
             const days = [ "Monday",
                            "Tuesday", 
                            "Wednesday",
                            "Thursday", 
                            "Friday", 
                            "Saturday"
                            "Sunday" ];
            
            
            document.getElementById("dateandtime").value = months[(date.getMonth()+1)] + (date.getFullYear()) + days[(date.getDay())] + (date.getHours()) + ':' +(date.getMinutes());
                        
        }

        Current Date and Time: 
        <br/>
        <input type = "text" id = "dateandtime" name = "dateandtime" onload="getDate()" readonly>
        <br/><br/>

However, when I run it, nothing is displayed in my textbox.

Any idea why that is the case?

HTMLInputElements do not dispatch a `load` event. `"Saturday'` is invalid syntax. — Sebastian Simon, Oct 22 '22 at 14:45
Hi great catch on the syntax error. What event should i do instead of onload? — Justin, Oct 22 '22 at 14:48
and [html - how to fill input text on load?](https://stackoverflow.com/questions/27664654/html-how-to-fill-input-text-on-load). There are other elements that support the onload event: [What html tags support the onload/onerror javascript event attributes?](https://stackoverflow.com/questions/679704/what-html-tags-support-the-onload-onerror-javascript-event-attributes) — pilchard, Oct 22 '22 at 15:30

score 1 · Answer 1 · answered Oct 22 '22 at 15:05

Here is my solution:

function getNow() {
  let now = new Date();
  let option = {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  };
  let dateFormatter = new Intl.DateTimeFormat('en-GB', option);
  let weekDayFormatter = new Intl.DateTimeFormat('en-GB', {
    weekday: "long"
  });
  let timeFormatter = new Intl.DateTimeFormat('en-GB', {
    hour: 'numeric',
    minute: 'numeric'
  });
  let dateString = dateFormatter.format(now);

  return (dateString + " " + weekDayFormatter.format(now) + " " + timeFormatter.format(now));
}

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("dateandtime").value = getNow();
});

<input type="text" id = "dateandtime" name = "dateandtime" readonly>

score 1 · Accepted Answer · answered Oct 22 '22 at 15:06

JavaScript has a window onload event to launch certain functions whenever a web page is loaded.

window.onload = function() { /* code here */ }

Your code should look like:

window.onload = function() {
  const date = new Date();
            
            const months = [ "January",
                            "February",
                            "March",
                            "April",
                            "May",
                            "June",
                            "July", 
                            "August",
                            "September",
                            "October",
                            "November",
                            "December" ];
                            
             const days = [ "Monday",
                            "Tuesday", 
                            "Wednesday",
                            "Thursday", 
                            "Friday", 
                            "Saturday",
                            "Sunday"];
            
            
            document.getElementById("dateandtime").value = months[(date.getMonth()+1)] + (date.getFullYear()) + days[(date.getDay())] + (date.getHours()) + ':' +(date.getMinutes());
};

How to get current date and time in a specific format using javascript

2 Answers2