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?

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?

• javascript
• html
• date

• did you look here ? – Neji Soltani Commented Nov 30, 2017 at 13:55
• There is no documented way 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 Commented Nov 30, 2017 at 14:04

4 Answers 4

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/p8fwhydc/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();

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>

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:

1. How do I parse the string to a Date
2. How do I format the date

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)));