How to have the newDate string return more than the first three characters for a weekday in JS for HTML?

Question

[This question is different from other JS Date questions because it focuses on extending the default 3-character limit in the Date function.]

I have created a JavaScript new Date function for HTML5. The Date function retrieves the current date each time the page is loaded. I need the day of the month (16) before the month (February). I also need the date to display the full length of characters for the date (Saturday, February) instead of the first three characters of the date (Sat, Feb).

In my HTML document, the date currently looks like this:

Sat Feb 16 2019

This is my current JS script:

var d = new Date();
document.getElementById("date").innerHTML = d.toDateString();

I need the date to display all of the characters for the weekday and month.
I need the date to look like this:

Saturday, 16 February 2019

I am still new to JavaScript, so any help or advice is appreciated.

Possible duplicate of [Javascript format date / time](https://stackoverflow.com/questions/25275696/javascript-format-date-time) — deathangel908, Feb 16 '19 at 20:22
Possible duplicate of [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — Chris Tapay, Feb 16 '19 at 20:23

score 2 · Answer 1 · answered Feb 16 '19 at 20:24

You can use toLocaleDateString which takes arguments to modify date in specific language conventions

The toLocaleDateString() method returns a string with a language sensitive representation of the date portion of this date. The new locales and options arguments let applications specify the language whose formatting conventions should be used and allow to customize the behavior of the function. In older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent. From MDN

var d = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById("date").innerHTML = d.toLocaleDateString('en-US', options);

<div id="date"></div>

Thank you, I didn't notice the checkmark. I have a small question with removing a comma in the date. It looks like this: Saturday, February 16, 2019. It will look better if the second comma were removed. — Coleman Likes, Feb 17 '19 at 00:12

score 1 · Answer 2 · answered Feb 16 '19 at 20:26

1

You can use MomentJS

moment().format('dddd, D MMMM YYYY'); // Saturday, 16 February 2019
moment('Sat Feb 16 2019').format('dddd, D MMMM YYYY'); // Saturday, 16 February 2019

answered Feb 16 '19 at 20:26

Remi Sture

12,000
5
22
35

Sth · Accepted Answer · 2019-06-21T10:31:10.903

1

You may consider using Moment.js. It’s very useful and simple when working with date formatting.

Otherwise you can use a a function containing switch: case for changing the month’s length and write some other code for changing the places of the day and month.

    function dateLongator(mth){
          switch(mth){
              case “jan”: return “January”;
              case “feb”: return “February”;
          }
    }

etc.

edited Jun 21 '19 at 10:31

answered Feb 16 '19 at 20:30

Sth

522
8
21

This will create a SyntaxError. – Unmitigated Feb 17 '19 at 01:28
Yes, because it’s just a pseudocode and had a goal to give the idea, not the solving code. Giving a ready-to-go code wouldn’t help that person to actually learn :) – Sth Feb 17 '19 at 05:13
This will be hard to maintain across locales. Why reinvent the wheel when Moment.js has done all the hard work for us already? – Remi Sture Feb 17 '19 at 09:49
Yes, and you did not provide an answer with Moment.js. You just linked to the documentation. – Remi Sture Feb 18 '19 at 08:41

score 0 · Answer 4 · answered Feb 17 '19 at 01:37

You can use a function to format the date using the standard Date methods which will work crossbrowser.

<p></p>
<script>
var d = new Date;
function formatDate(d){
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 
  months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var day = days[d.getDay()], 
      month = months[d.getMonth()], 
      date = d.getDate(), 
      year = d.getFullYear();
  return day + ', ' + date + ' ' + month + ' ' + year;
}
document.querySelector('p').textContent = formatDate(d);
</script>

How to have the newDate string return more than the first three characters for a weekday in JS for HTML?

4 Answers4