How do I display the day output as Thursday, Dec 16 rather than MM/DD in CSS / HTML

Question

I am trying to figure out how to display this code in a more user friendlier manner for example instead of displaying as MM/DD ex. "12/20 " I would rather it say Name of day , first 3 letters of the month and the DD for example " Monday, Dec 20 " . Is that possible? Please find the code below.

/* js file for autocalculate shipping*/
(function() {
// estimate the delivery date  
  var dateEnd = 3;
  var toDate = Date.today().addDays(dateEnd);
  if (toDate.is().saturday() || toDate.is().sunday()) { 
    toDate = toDate.next().monday(); 
  }
  document.getElementById('toDate').innerHTML = toDate.toString('MM/dd');
})();

I guess you could just write function that takes MM/dd as an argument and outputs it differently. — pso, Dec 15 '21 at 04:50
Please add the correct tags to get better answers. This has nothing to do with neither current tags `java html css shopify`. Add just `javascript` and you're good to go. — LSE, Dec 15 '21 at 05:12
Check this https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date See whether it will help you. — Wanderi Mwangi, Dec 15 '21 at 05:39

score 1 · Accepted Answer · answered Dec 15 '21 at 06:03

Using JS Date to display Date in the above format.

const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const months = ["Dec","Nov","Oct","Sep","Aug","Jul","Jun","May","Apr","Mar","Feb","Jan"]

const getFormattedDate = (date) => {
  return `${days[date.getDay()]} - ${months[date.getMonth()]} - ${date.getFullYear()}`
}


let d = new Date();
console.log(getFormattedDate(d))

Using Moment JS https://momentjs.com/

let date = moment()
console.log(date.format('ddd MMM YY'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

A variation of option 2 worked for me, I just adapted my solution to have toDate.toString( 'ddd, MMM dd') @sojin — bain, Dec 15 '21 at 06:37

How do I display the day output as Thursday, Dec 16 rather than MM/DD in CSS / HTML

1 Answers1