javascript how to display a input dates month, day and year in separate lines?

Question

How do I parse a date in javascript to out put a users date input to display in html in seperate lines such as:

Month:
Day:
Year:

I am using:

<button type="button" onclick="date_test()">Process</button>
<br> <p id="iop"></p>

https://www.w3schools.com/js/js_dates.asp check this out for reference about javascript dates. you will have to use a combination of function provided by the date object. — Elie Nassif, Apr 10 '17 at 06:17
@ElieNassif—please don't reference w3schools, MDN or ECMA-262 are much better references. — RobG, Apr 10 '17 at 06:21
Possible duplicate of [Parse Date, Month, and Year from Javascript "Date" form](http://stackoverflow.com/questions/19597361/parse-date-month-and-year-from-javascript-date-form) — user3004449, Apr 10 '17 at 06:21
Have you seen this, https://www.w3schools.com/js/js_date_methods.asp — Mayur Shah, Apr 10 '17 at 06:22

score 1 · Accepted Answer · answered Apr 10 '17 at 06:21

Check this JSFiddle.

Code:

var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();

document.getElementById("output").innerHTML="<p>Month:"+month+"</p><p>Day:"+day+"</p><p>Year:"+year+"</p>";

var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();

document.getElementById("output").innerHTML="<p>Month:"+month+"</p><p>Day:"+day+"</p><p>Year:"+year+"</p>";

<div id="output">
</div>

Thank you for all the input on my question. csharpbd, your response was exactly what I was trying to achieve. I appreciate your time and help! — Ed Villa, Apr 10 '17 at 06:34

score 0 · Answer 2 · answered Apr 10 '17 at 06:39

var date = new Date(),
  locale = "en-us",
  month = date.toLocaleString(locale, {
    month: "long"
  }),
  day = date.toLocaleString(locale, {
    day: "numeric"
  }),
  year = date.toLocaleString(locale, {
    year: "numeric"
  });
$("#month").append(month);
$("#day").append(day);
$("#year").append(year);

.date {
  display: flex;
  flex-direction: column;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="date">
  <span id="month">Month: </span>

  <span id="day">Day: </span>

  <span id="year">Year: </span>
</div>

javascript how to display a input dates month, day and year in separate lines?

2 Answers2