Change Date format using Javascript

Question

How to change a text box value from '08/11/2012' to '08-NOV-2012' using JavaScript After Page load it should display '08-NOV-2012'

@MarcB Just because there's a reference that shows something you could use doesn't mean there aren't easier/better ways that you'll find out about if you just ask people. OTOH I do believe similar questions to this must have been asked a thousand times before on SO. — Vala, Nov 15 '12 at 14:52
@Thor84no: exactly. asked far too many times. at some point, we do have to start expecting people to have done at least the basic research themselves. It's one thing to have trouble with something. we all do, and that's why SO is here. but SO should never become the "oh, I can't be bothered to do my job, I'll just go to SO and have some other person do my work for me" dumping ground. — Marc B, Nov 15 '12 at 14:54
@MarcB I understand the frustration, I'm just pointing out that the problem is more to do with not searching for similar problems before posting than with not reading the manual. If I'm tackling something new, reading the manual and guessing how to best do it isn't as good as seeing how people tackle the same problem in the real world. — Vala, Nov 15 '12 at 15:02

konsumer · Answer 1 · 2012-11-22T23:45:41.037

I like momentjs, too, because it makes lots of date-operations simple and easy to read. here is your answer.

var d = moment('08/11/2012', "DD/MM/YYYY").format('DD-MMM-YYYY').toUpperCase();

Just include this in your page: <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script> before your code is loaded.

I might also recommend using <input type="date" /> for HTML5 peeps (nice date selector) with a date-input polyfill.

score 1 · Answer 2 · edited May 23 '17 at 11:43

You can do this yourself

var mydate = new Date(form.startDate.value);
var month = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"][mydate.getMonth()];
var str = mydate.getdate() + '-' + month + '-' + mydate.getFullYear();

Refer to How to change date format in JavaScript You might have to change the textbox.text value to str on page load..

score 0 · Answer 3 · answered Nov 15 '12 at 14:49

0

Might I recommend this brilliant Javascript date library:

http://momentjs.com/

answered Nov 15 '12 at 14:49

Greg Smith

2,449
2
24
37

1

[a link to a library does not cut it as an answer](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers) - perhaps if you were to show how you would accomplish the task using that library. – jbabey Nov 15 '12 at 15:26
I didn't really think the initial question merited someone else reading the freely available documentation and figuring out an answer, but fair enough if you don't agree. – Greg Smith Nov 15 '12 at 15:43

score 0 · Answer 4 · answered Nov 16 '12 at 00:42

Here is the Code I use for date formatting

/*jslint sub: true, todo: true, browser: true, devel: true, indent: 4, maxerr: 50, maxlen: 120 */
/*global */
/*
About: Author
George Weilenmann <email at abyssoft@gmail.com>

About: Purpose
Adds a formatting function to the prototypal level of the Native Date object. And while it is certain that the code 
could be written more concisely it ends up loosing a lot of its readability. When minified is ~1 KB in size.

About: Prerequisite

Script Requires:
Native browser support for the Date Object and access tot he prototype of the Date object

JSLint Flags:
    2012-08-11 edition

    sub - true
    todo - true
    browser - true
    devel - true

Version history:
1.2.0 - further code cleanup and renaming of variables to improve readability, changed formatString elements to be 
to terminate in ;
1.1.0 - code clean up and documentation added
1.0.0 - Created prior to best practices

Licensing: +Use, +Examination, +Reverse Engineering, -Simple Distribution, +Distribution with full credit and link
*/
/*
Method: format (formatString {String})
Formats a {Date} to desired form. 

Parameter: formatString {String}
Contains the desired format of the {Date}. In formatting process only recognized formatting elements are replaced 
any other characters are taken at face value and returned unaltered.

Recognized Formats:
YYYY - 4 digit year
YY - 2 digit year
MMMM - Month Name
MMM - Month Abbreviation
MM - 2 digit month
M - auto digit month
DDDD - Day Name
DDD - Day Abbreviation
DD - 2 digit day
D - auto digit day
th - Ordinal suffix
hhh - 24 hour number [0-23]
hh - 2 digit hour from 12 hour clock
h - auto digit hour
mm - 2 digit minute
m - auto digit minute
ss - 2 digit second
s - auto digit second
sss - milliseconds
ampm - am/pm
AMPM - AM/PM


Returns: {String}
The processed date in string form.  If formatString is undefined or null a blank string is returned.
*/
Date.prototype.format = function (formatString) {
    "use strict";
    var
        MonthNames = [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        DayNames = [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ],
        milliseconds = this.getMilliseconds(),
        seconds = this.getSeconds(),
        twoDigitSeconds = (seconds < 10 ? ('0' + seconds) : String(seconds)),
        minutes = this.getMinutes(),
        twoDigitMinutes = (minutes < 10 ? ('0' + minutes) : String(minutes)),
        twentyfourHours = this.getHours(),
        hours = (
            (
                twentyfourHours === 0 ?
                        24 :
                        twentyfourHours
            ) > 12 ? (twentyfourHours === 0 ? 24 : twentyfourHours) - 12 : twentyfourHours
        ),
        twoDigitHours = (hours < 10 ? ('0' + hours) : String(hours)),
        meridiem = (twentyfourHours < 12 ? 'am' : 'pm'),
        fullYear = this.getFullYear(),
        shortYear = String((fullYear)).substr(2, 2),
        monthNumber = this.getMonth() + 1,
        twoDigitMonth = (monthNumber < 10 ? ('0' + monthNumber) : monthNumber),
        MonthName = MonthNames[monthNumber - 1],
        MonthAbbreviation = MonthName.substr(0, 3),
        dayNumber = String(this.getDate()),
        twoDigitDay = (dayNumber < 10 ? ('0' + dayNumber) : String(dayNumber)),
        dayName = DayNames[this.getDay()],
        dayAbbreviation = dayName.substr(0, 3),
        ordinal = (
            /[023]1/.test(twoDigitDay) ?
                    "st" :
                    (
                        /[02]2/.test(twoDigitDay) ?
                                "nd" :
                                (
                                    /[02]3/.test(twoDigitDay) ?
                                            "rd" :
                                            "th"
                                )
                    )
        ),
        stringToFormat = String(formatString||"");

    return (
        stringToFormat
            .replace("YYYY;", fullYear)
            .replace("YY;", shortYear)
            .replace("MMMM;", MonthName)
            .replace("MMM;", MonthAbbreviation)
            .replace("MM;", twoDigitMonth)
            .replace("M;", monthNumber)
            .replace("DDDD;", dayName)
            .replace("DDD;", dayAbbreviation)
            .replace("DD;", twoDigitDay)
            .replace("D;", dayNumber)
            .replace("th;", ordinal)
            .replace("hhh;", twentyfourHours)
            .replace("hh;", twoDigitHours)
            .replace("h;", hours)
            .replace("mm;", twoDigitMinutes)
            .replace("m;", minutes)
            .replace("sss;", milliseconds)
            .replace("ss;", twoDigitSeconds)
            .replace("s;", seconds)
            .replace("ampm;", meridiem)
            .replace("AMPM;", meridiem.toUpperCase())
    );
};

Change Date format using Javascript

4 Answers4