How to get month name from an html Date input value?

Question

This is the date input

<input id="customer-date" name="customer-date" type="date" required>

and this is the script

const customerDate = document.getElementById('customer-date').value;
const dateHandler = document.getElementById('date-handler');
dateHandler.innerHTML = customerDate;

But when I pick a date, the value I get to display in dateHandler is formatted like 2017-11-22 the problem is that the format="dd/MM/yyyy" attribute doesn't make it consistent between days and months when displaying and its obviously confusing. So I want to get the month name from the picked date to display it such 2017-November-22. Any ideas?

did you look [here](https://www.w3schools.com/jsref/jsref_getmonth.asp) ? — Neji Soltani, Nov 30 '17 at 13:55
There is no [documented way](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) doing this using the html5 date input. You will have to use your own or 3rd party javascript-implementation for doing this, or split into 3 input fields for day, month and year. — Joschi, Nov 30 '17 at 14:04

Noy · Answer 1 · 2017-11-30T14:16:11.310

2

If you were looking to just get the month name from the month number, you could use this:

var str = "2017-11-22"; // this would be your date
var res = str.split("-"); // turn the date into a list format (Split by / if needed)
var months = ["Jan", "Feb", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December"];
console.log(months[res[1]-1]) // month name

JSFiddle: https://jsfiddle.net/p8fwhydc/1/

edited Nov 30 '17 at 14:16

answered Nov 30 '17 at 14:06

Noy

62
6

pretty much the same as i did , just why did put an empty string at the beginning of the array ? – Neji Soltani Nov 30 '17 at 14:09
didn't see the answer as I posted it haha. And the empty string is because the array starts at 0. There's no '0th' month. – Noy Nov 30 '17 at 14:10
adding `+1` to the index is better solution i guess – Neji Soltani Nov 30 '17 at 14:12
Yeah you're right, you could do something like: months[res[1]-1] - edited – Noy Nov 30 '17 at 14:12

Neji Soltani · Accepted Answer · 2017-11-30T14:21:22.380

Here's the simple solution I made , I hope that helps you

function showdate() {
  var customerDate = document.getElementById('customer-date').value;
  var dateHandler = document.getElementById('date-handler');
  dateHandler.innerHTML = customerDate;

  var months = new Array();
  months[0] = "January";
  months[1] = "February";
  months[2] = "March";
  months[3] = "April";
  months[4] = "May";
  months[5] = "June";
  months[6] = "July";
  months[7] = "August";
  months[8] = "September";
  months[9] = "October";
  months[10] = "November";
  months[11] = "December";

  var date = new Date(customerDate);
  var month = months[date.getMonth()];
  //converting the date into array
  var dateArr = customerDate.split("-");
  //setting up the new date form
  var forDate = dateArr[0] + "-" + month + "-" + dateArr[2];
  document.getElementById("new-date-handler").innerHTML = forDate;
}

<input id="customer-date" name="customer-date" type="date" required>
<input type=button value=validate onclick="showdate()">
<p id="date-handler"></p>
<p id="new-date-handler"></p>

A date format of YYYY-MM-DD will be parsed as UTC, however you are using the local value for the month, so it will return the wrong month for a period equal to the local timezone at the start and end of the month. There is in fact no reason at all to use a Date object here. All you're doing is parsing it to a Date, then getting back the month number that was input in the first place. So just get the month number and convert it to the abbreviated name: `month = months[dateArr[1]]`. — RobG, Dec 01 '17 at 00:58

GGO · Answer 3 · 2017-12-01T08:23:47.473

1

You can use the Date() javascript function like :

Date.prototype.getFullDate = function() {
     return this.getFullYear() + '-' + this.toLocaleString(undefined, {month:'long'}) + '-' + this.getDate();
}
const dateStr = document.getElementById('customer-date').value.split('/');
var date = new Date(dateStr[2], dateStr[1], dateStr[0]);
document.getElementById('date-handler').innerHTML = date.getFullDate();

edited Dec 01 '17 at 08:23

answered Nov 30 '17 at 14:06

GGO

2,678
4
20
42

1

`getMonth` returns a number – Neji Soltani Nov 30 '17 at 14:07

score 1 · Answer 4 · answered Dec 01 '17 at 02:22

When reformatting a date string, you should always consider just reformatting the string and avoiding Date objects altogether, as for Noy's answer.

However, you can also use some Date object features if you take precautions to avoid the pitfalls of parsing and formatting.

This type of question is two questions in one:

In the first case, a date format of YYYY-MM-DD should be parsed as UTC (some browsers may not) so you should parse that manually.

The second part is to generate a formatted string, you can leverage the Intl object where supported to get the string in the host default language, e.g.

// Parse string in YYYY-MM-DD format as local
function parseYMD(s) {
  var b = s.split(/\D/);
  return new Date(b[0], b[1]-1, b[2]);
}

// Format Date as D-MMMM-YYYY using host default language for month name 
function formatDMMMMY(date) {
  function z(n){return (n<10?'0':'') + n}
  return date.getFullYear() + '-' +
         date.toLocaleString(undefined, {month:'long'}) + '-' +
         z(date.getDate());
}

var s = '2017-11-22';
console.log(parseYMD(s).toString());
console.log(formatDMMMMY(parseYMD(s)));

How to get month name from an html Date input value?

4 Answers4