Get month name from Date
JavascriptDateDate FormatTime FormatJavascript Problem Overview
How can I generate the name of the month (e.g: Oct/October) from this date object in JavaScript?
var objDate = new Date("10/11/2009");
Javascript Solutions
Solution 1 - Javascript
Shorter version:
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const d = new Date();
document.write("The current month is " + monthNames[d.getMonth()]);
Note (2019-03-08) - This answer by me which I originally wrote in 2009 is outdated. See David Storey's answer for a better solution.
Solution 2 - Javascript
It is now possible to do this with the ECMAScript Internationalization API:
const date = new Date(2009, 10, 10); // 2009-11-10
const month = date.toLocaleString('default', { month: 'long' });
console.log(month);
'long'
uses the full name of the month, 'short'
for the short name, and 'narrow'
for a more minimal version, such as the first letter in alphabetical languages.
You can change the locale from browser's 'default'
to any that you please (e.g. 'en-us'
), and it will use the right name for that language/country.
With toLocaleString
api you have to pass in the locale and options each time. If you are going do use the same locale info and formatting options on multiple different dates, you can use Intl.DateTimeFormat
instead:
const formatter = new Intl.DateTimeFormat('fr', { month: 'short' });
const month1 = formatter.format(new Date());
const month2 = formatter.format(new Date(2003, 5, 12));
console.log(`${month1} and ${month2}`); // current month in French and "juin".
For more information see my blog post on the Internationalization API.
Solution 3 - Javascript
Here's another one, with support for localization :)
Date.prototype.getMonthName = function(lang) {
lang = lang && (lang in Date.locale) ? lang : 'en';
return Date.locale[lang].month_names[this.getMonth()];
};
Date.prototype.getMonthNameShort = function(lang) {
lang = lang && (lang in Date.locale) ? lang : 'en';
return Date.locale[lang].month_names_short[this.getMonth()];
};
Date.locale = {
en: {
month_names: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
month_names_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
};
you can then easily add support for other languages:
Date.locale.fr = {month_names: [...]};
Solution 4 - Javascript
I heartily recommend the format
function from, the moment.js library, which you can use like this:
moment().format("MMM"); // "Apr" - current date
moment(new Date(2012, 01, 04)).format("MMM"); // "Feb" - from a local date
moment.utc(new Date(2012, 00, 04).format("MMM"); // "Jan" - from a UTC date
Use "MMMM" instead of "MMM" if you need the full name of the month
In addition to a lengthy list of other features, it has strong support for internationalization.
Solution 5 - Javascript
If you don't mind extending the Date prototype (and there are some good reasons to not want to do this), you can actually come up with a very easy method:
Date.prototype.monthNames = [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
];
Date.prototype.getMonthName = function() {
return this.monthNames[this.getMonth()];
};
Date.prototype.getShortMonthName = function () {
return this.getMonthName().substr(0, 3);
};
// usage:
var d = new Date();
alert(d.getMonthName()); // "October"
alert(d.getShortMonthName()); // "Oct"
These functions will then apply to all javascript Date objects.
Solution 6 - Javascript
If we need to pass our input then we need to use the following way
input: '2020-12-28'
Code:
new Date('2020-12-28').toLocaleString('en-us',{month:'short', year:'numeric'})
Output: "Dec 2020"
Solution 7 - Javascript
You could just simply use Date.toLocaleDateString() and parse the date wanted as parameter
const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
const options = { year: 'numeric', month: 'short', day: 'numeric' };
console.log(event.toLocaleDateString('de-DE', options));
// expected output: Donnerstag, 20. Dezember 2012
console.log(event.toLocaleDateString('en-US', options));
// US format
// In case you only want the month
console.log(event.toLocaleDateString(undefined, { month: 'short'}));
console.log(event.toLocaleDateString(undefined, { month: 'long'}));
You can find more information in the Firefox documentation
Solution 8 - Javascript
Date.prototype.getMonthName = function() {
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
return monthNames[this.getMonth()];
}
It can be used as
var month_Name = new Date().getMonthName();
Solution 9 - Javascript
If you are in hurry...then here you go!
const date = new Date(Date.now());
date.toLocaleString('en-US', {month: 'short'}); // {month:'long'}
Expected Output: "Apr"
Solution 10 - Javascript
document.write(new Date().toLocaleString('en-us',{month:'long', year:'numeric', day:'numeric'}))
Solution 11 - Javascript
Some common easy process from date object can be done by this.
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var monthShortNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
function dateFormat1(d) {
var t = new Date(d);
return t.getDate() + ' ' + monthNames[t.getMonth()] + ', ' + t.getFullYear();
}
function dateFormat2(d) {
var t = new Date(d);
return t.getDate() + ' ' + monthShortNames[t.getMonth()] + ', ' + t.getFullYear();
}
console.log(dateFormat1(new Date()))
console.log(dateFormat2(new Date()))
Or you can make date prototype like
Date.prototype.getMonthName = function() {
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
return monthNames[this.getMonth()];
}
Date.prototype.getFormatDate = function() {
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
return this.getDate() + ' ' + monthNames[this.getMonth()] + ', ' + this.getFullYear();
}
console.log(new Date().getMonthName())
console.log(new Date().getFormatDate())
Ex:
var dateFormat3 = new Date().getMonthName();
# March
var dateFormat4 = new Date().getFormatDate();
# 16 March, 2017
Solution 12 - Javascript
You might use datejs to do that. Check the FormatSpecifiers, MMMM gives you the month's name:
var objDate = new Date("10/11/2009");
document.write(objDate.toString("MMMM"));
And datejs got that localized for more than 150 locales! See here
Solution 13 - Javascript
Try:
var objDate = new Date("10/11/2009");
var strDate =
objDate.toLocaleString("en", { day: "numeric" }) + ' ' +
objDate.toLocaleString("en", { month: "long" }) + ' ' +
objDate.toLocaleString("en", { year: "numeric"});
Solution 14 - Javascript
Another way to format date
new Date().toLocaleString('en-us',{month:'long', year:'numeric', day:'numeric'}) //output: "May 21, 2019"
Solution 15 - Javascript
Here's a way that does not depend on a hard-coded array and supports multiple locales.
If you need a whole array:
var monthsLocalizedArray = function(locale) {
var result = [];
for(var i = 0; i < 12; i++) {
result.push(new Date(2010,i).toLocaleString(locale,{month:"long"}));
}
return result;
};
Usage:
console.log(monthsLocalizedArray('en')); // -> ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
console.log(monthsLocalizedArray('bg')); // -> ["януари", "февруари", "март", "април", "май", "юни", "юли", "август", "септември", "октомври", "ноември", "декември"]
If you need only a selected month (faster):
var monthLocalizedString = function(month, locale) {
return new Date(2010,month).toLocaleString(locale,{month:"long"});
};
Usage:
console.log(monthLocalizedString(1, 'en')); // -> February
console.log(monthLocalizedString(1, 'bg')); // -> февруари
console.log(monthLocalizedString(1, 'de')); // -> Februar
Tested and works fine on Chrome and IE 11. On mozilla some modifications are needed, because it returns the whole date.
Solution 16 - Javascript
Instead of declaring array which hold all the month name and then pointing with an index, we can also write it in a shorter version as below:
var objDate = new Date().toLocaleString("en-us", { month: "long" }); // result: August
var objDate = new Date().toLocaleString("en-us", { month: "short" }); // result: Aug
Solution 17 - Javascript
Unfortunately the best way to extract the month name is from the UTCString representation:
Date.prototype.monthName = function() {
return this.toUTCString().split(' ')[2]
};
d = new Date();
//=> Thu Mar 06 2014 23:05:21 GMT+0000 (GMT)
d.monthName();
//=> 'Mar'
Solution 18 - Javascript
You can use one of several available Date formatters. Since this falls within the JavaScript specification, it will be available in both browser and server-side modes.
objDate.toString().split(" ")[1]; // gives short name, unsure about locale
objDate.toLocaleDateString.split(" ")[0]; // gives long name
e.g.
js> objDate = new Date(new Date() - 9876543210)
Mon Feb 04 2013 12:37:09 GMT-0800 (PST)
js> objDate.toString().split(" ")[1]
Feb
js> objDate.toLocaleString().split(" ")[0]
February
There are more at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Solution 19 - Javascript
The natural format this days is to use Moment.js.
The way to get the month in a string format , is very simple in Moment.js no need to hard code the month names in your code: To get the current month and year in month name format and full year (May 2015) :
moment(new Date).format("MMMM YYYY");
Solution 20 - Javascript
The easiest and simplest way:
const dateStr = new Date(2020, 03, 10).toDateString(); // 'Fri Apr 10 2020'
const dateStrArr = dateStr.split(' '); // ['Fri', 'Apr', '10', '2020']
console.log(dateStrArr[1]); // 'Apr'
- Convert the date to a string.
- Split by ' ' a space.
- Select second element of from array.
Solution 21 - Javascript
Tested on IE 11, Chrome, Firefox
const dt = new Date();
const locale = navigator.languages != undefined ? navigator.languages[0] : navigator.language;
const fullMonth = dt.toLocaleDateString(locale, {month: 'long'});
console.log(fullMonth);
Solution 22 - Javascript
You can try this:
let d = new Date(),
t = d.toDateString().split(" ");
console.log(t[2] + " " + t[1] + " " + t[3]);
Solution 23 - Javascript
This can be also done if you are using kendo.
kendo.toString(dateobject, "MMMM");
Here are list of formatters from kendo site:
>"d" Renders the day of the month, from 1 through 31. > >"dd" The day of the month, from 01 through 31. > >"ddd" The abbreviated name of the day of the week. > >"dddd" The full name of the day of the week. > >"f" The tenths of a second in a date and time value. > >"ff" The hundredths of a second in a date and time value. > >"fff" The milliseconds in a date and time value. > >"M" The month, from 1 through 12. > >"MM" The month, from 01 through 12. > >"MMM" The abbreviated name of the month. > >"MMMM" The full name of the month. > >"h" The hour, using a 12-hour clock from 1 to 12. > >"hh" The hour, using a 12-hour clock from 01 to 12. > >"H" The hour, using a 24-hour clock from 1 to 23. > >"HH" The hour, using a 24-hour clock from 01 to 23. > >"m" The minute, from 0 through 59. > >"mm" The minute, from 00 through 59. > >"s" The second, from 0 through 59. > >"ss" The second, from 00 through 59. > >"tt" The AM/PM designator. > >"yy" The last two characters from the year value. > >"yyyy" The year full value. > >"zzz" The local timezone when using formats to parse UTC date strings.
Solution 24 - Javascript
If you don't want to use an external library, or store an array of month names, or if the ECMAScript Internationalization API is not good enough because of browser compatibility you can always do it the old-fashioned way by extracting the info from the date output:
var now = new Date();
var monthAbbrvName = now.toDateString().substring(4, 7);
This would give you the abbreviated month name, e.g. Oct. I believe the date will come in all sorts of formats depending on the initialization and your locale so take a look at what toDateString()
returns and recalculate your substring()
values based on that.
Solution 25 - Javascript
You can handle with or without translating to the local language
- Generates value as "11 Oct 2009"
const objDate = new Date("10/11/2009");
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
if (objDate !== 'Invalid Date' && !isNaN(objDate)) {
console.log(objDate.getDate() + ' ' + months[objDate.getMonth()] + ' ' + objDate.getFullYear())
}
- The ECMAScript Internationalization API to translate month to local language (eg: 11 octobre)
const convertDate = new Date('10/11/2009')
const lang = 'fr' // de, es, ch
if (convertDate !== 'Invalid Date' && !isNaN(convertDate)) {
console.log(convertDate.getDate() + ' ' + convertDate.toLocaleString(lang, {
month: 'long'
}))
}
Solution 26 - Javascript
If you're using jQuery, you're probably also using jQuery UI, which means you can use $.datepicker.formatDate().
$.datepicker.setDefaults( $.datepicker.regional[ "nl" ] ); // dutch
$.datepicker.formatDate( "dd MM yy", objDate );
Solution 27 - Javascript
My Best Solution is as follow:
var dateValue = Date();
var month = dateValue.substring(4,7);
var date = dateValue.substring(8,10);
var year = dateValue.substring(20,24);
var finaldateString = date+"-"+month+"-"+year;
Solution 28 - Javascript
With momentjs, just use the format notation.
const myDate = new Date()
const shortMonthName = moment(myDate).format('MMM') // Aug
const fullMonthName = moment(myDate).format('MMMM') // August
Solution 29 - Javascript
For me this is best solution is,
for TypeScript as well
const env = process.env.REACT_APP_LOCALE || 'en';
const namedMonthsArray = (index?: number): string[] | string => {
const months = [];
for (let month = 0; month <= 11; month++) {
months.push(
new Date(new Date('1970-01-01').setMonth(month))
.toLocaleString(env, {
month: 'long',
})
.toString(),
);
}
if (index) {
return months[index];
}
return months;
};
Output is
["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
Solution 30 - Javascript
It can be done as follows too:
var x = new Date().toString().split(' ')[1]; // "Jul"
Solution 31 - Javascript
To get Date formatted as "dd-MMM-yyyy" using JavaScript use the below code
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];
const d = new Date();
var dd = String(d.getDate()).padStart(2, '0');
var mm = String(d.getMonth() + 1).padStart(2, '0');
var yyyy = d.getFullYear();
var fullDate = +dd +"-"+ monthNames[d.getMonth()] +"-"+ yyyy;
document.write("The date is : "+ fullDate);
Solution 32 - Javascript
Store the names in a array and look up by the index of the month.
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
document.write("The current month is " + month[d.getMonth()]);
Solution 33 - Javascript
If you don't want to use moment and want to display month name -
.config($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
if(date !== null) {
if(date.getMonthName == undefined) {
date.getMonthName = function() {
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
return monthNames[this.getMonth()];
}
}
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();
return day + ' ' + date.getMonthName() + ' ' + year;
}
};
}
Solution 34 - Javascript
I have a partial solution that I came up with. It uses a regular expression to extract the month and day name. But as I look through the Region and Language options (Windows) I realize that different cultures have different format order... maybe a better regular expression pattern could be useful.
function testDateInfo() {
var months = new Array();
var days = new Array();
var workingDate = new Date();
workingDate.setHours(0, 0, 0, 0);
workingDate.setDate(1);
var RE = new RegExp("([a-z]+)","ig");
//-- get day names 0-6
for (var i = 0; i < 7; i++) {
var day = workingDate.getDay();
//-- will eventually be in order
if (days[day] == undefined)
days[day] = workingDate.toLocaleDateString().match(RE)[0];
workingDate.setDate(workingDate.getDate() + 1);
}
//--get month names 0-11
for (var i = 0; i < 12; i++) {
workingDate.setMonth(i);
months.push(workingDate.toLocaleDateString().match(RE)[1]);
}
alert(days.join(",") + " \n\r " + months.join(","));
}
Solution 35 - Javascript
Just extending on the many other excellent answers - if you are using jQuery - you could just do something like
$.fn.getMonthName = function(date) {
var monthNames = [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
];
return monthNames[date.getMonth()];
};
where date
is equal to the var d = new Date(somevalue)
. The primary advantage of this is per @nickf said about avoiding the global namespace.
Solution 36 - Javascript
To get a array of month name :
Date.monthNames = function( ) {
var arrMonth = [],
dateRef = new Date(),
year = dateRef.getFullYear();
dateRef.setMonth(0);
while (year == dateRef.getFullYear()) {
/* push le mois en lettre et passe au mois suivant */
arrMonth.push( (dateRef.toLocaleString().split(' '))[2] );
dateRef.setMonth( dateRef.getMonth() + 1);
}
return arrMonth;
}
alert(Date.monthNames().toString());
// -> janvier,février,mars,avril,mai,juin,juillet,août,septembre,octobre,novembre,décembre
Solution 37 - Javascript
Just write a simple wrapper around toLocaleString
:
function LocalDate(locale) { this.locale = locale; }
LocalDate.prototype.getMonthName = function(date) { return date.toLocaleString(this.locale,{month:"long"}); };
var objDate = new Date("10/11/2009");
var localDate = new LocalDate("en"); console.log(localDate.getMonthName(objDate));
localDate.locale = "ru"; console.log(localDate.getMonthName(objDate));
localDate.locale = "zh"; console.log(localDate.getMonthName(objDate));
Solution 38 - Javascript
A quick hack I used which works well:
const monthNumber = 8;
const yearNumber = 2018;
const date = `${['Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'][monthNumber - 1]
} ${yearNumber}`;
console.log(date);
Solution 39 - Javascript
I did it via DatePipe.
const datePipe = new DatePipe(this.locale);
datePipe.transform(myDate, 'MMM. y');
You can inject the default locale inside your constructor like this:
constructor(@Inject(LOCALE_ID) private locale: string){}
Reference from Angular https://angular.io/api/common/DatePipe