Change date string and change DIV background color via onclick

Question

I have this script that works, but I need to change the format of the date string to look different. I'm currently getting: Tue Apr 10 2012 22:27:13 GMT-0700 (PDT)

I need the date string to look like this: April 10, 2012 10:28 PM

I also need to change the DIV background thats holding the input forn the date string when the button is clicked.

<form>

<input name="theDate" size="50">

<input type="button" value="Insert date" 
  onclick="this.form.theDate.value = new Date();">

</form>

A lot of similar questions were already asked, for eg http://stackoverflow.com/questions/476105/how-can-i-convert-string-to-datetime-with-format-specification-in-javascript — Krishna Deepak, Apr 11 '12 at 05:39

Hristo · Accepted Answer · 2012-04-11T05:58:39.743

1

Check out moment.js!

A lightweight (3.7k) javascript date library for parsing, manipulating, and formatting dates.

Using moment.js...

var today = moment(new Date());
today.format("MMMM D, YYYY h:m A"); // outputs "April 11, 2012 12:44 AM"

You can even do it in one line :)

moment().format("MMMM D, YYYY h:m A"); // outputs "April 11, 2012 12:49 AM"

So for your input element...

<input type="button" value="Insert date" onclick="this.form.theDate.value = moment().format('MMMM D, YYYY h:m A');">

Also, its worth mentioning to checkout date.js. I think the two libraries complement each other.

edited Apr 11 '12 at 05:58

answered Apr 11 '12 at 05:37

Hristo

45,559
65
163
230

Can I add it to onclick="this.form.theDate.value = new Date();" – Erik Apr 11 '12 at 05:51
yes of course! you just need to include the javascript library. – Hristo Apr 11 '12 at 05:54
I added the moment.js / Is this correct? onclick="this.form.theDate.value = moment().format("MMMM D, YYYY h:m A")"; – Erik Apr 11 '12 at 05:55
yes, that looks right. however, you have double quotes within double quotes... change it to this: `onclick="this.form.theDate.value = moment().format('MMMM D, YYYY h:m A');"` – Hristo Apr 11 '12 at 05:57
onclick="this.form.theDate.value = moment().format('MMMM D, YYYY h:m A');" – Erik Apr 11 '12 at 05:59
you must not have included the library properly... post your code up top – Hristo Apr 11 '12 at 06:01
I got it to work. thank you so much. If I wanted to also change a div background at the same time, can I add it to the same line? – Erik Apr 11 '12 at 06:12
@Erik... technically yes, but I'd recommend moving it to an outside function; makes for cleaner code – Hristo Apr 11 '12 at 06:12
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9944/discussion-between-erik-and-hristo) – Erik Apr 11 '12 at 06:14

Derek 朕會功夫 · Answer 2 · 2012-04-11T05:53:51.540

You can use the following to get different "times"-things:

For Year: date..getFullYear();
For Month: date.getMonth();
For Date: date.getDate();
For Hour: date.getHours();
For Minute: date.getMinutes();
     .
     .
     .
   etc. (date = new Date())

Solution: :D

var d = new Date(),
    y = d.getFullYear(),
    mo = d.getMonth(),
    da = d.getDate(),
    h = d.getHours(),
    m = d.getMinutes();

var time = m + " " + da + ", " + y + " " + h + ":" + m + ((h<12)?"AM":"PM");

LIVE DEMO: http://jsfiddle.net/DerekL/GZ7sB/

Naveed Butt · Answer 3 · 2012-04-11T07:35:50.257

0

You can use the format method of the Date object to format the dates as per your liking (provided in the formatter for which I have attached the link)...

Example:

var d = new Date();
d.format('m/dd/yy');

For additional information see this link...

edited Apr 11 '12 at 07:35

answered Apr 11 '12 at 05:42

Naveed Butt

2,861
6
32
55

kennebec · Answer 4 · 2012-04-11T06:14:38.470

You can prune out the parts you want-

alert(new Date().dayString('y','T'));

returned value: (String) April 11, 2012 1:58 AM

String.prototype.padZero= function(len, c){
    var s= "", c= c || "0", len= (len || 2)- this.length;
    while(s.length<len) s += c;
    return s + this;
}

Date.daynames= ['Sunday', 'Monday', 'Tuesday',
'Wednesday','Thursday', 'Friday', 'Saturday'];

Date.ddmm= (function(){
    return Date.parse('2/6/2009')>Date.parse('6/2/2009');
})();

Date.monthnames= ['January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October', 'November', 'December'];

Date.prototype.dayString= function(wch, wch2){
    var D= this, A, day, M, W;
    wch= wch? wch.toLowerCase():'y';
    M= Date.monthnames;
    W= Date.daynames;
    var A= [W[D.getDay()], ' ', M[D.getMonth()], ' ',
    D.getDate(), ', ', D.getFullYear()];
    if(wch.indexOf('s')!= -1){
        A[0]= A[0].substring(0, 3);
        A[2]= A[2].substring(0, 3);
    }
    if(Date.ddmm ||  /b/i.test(wch)){
        A.splice(2, 3, A[4], A[3], A[2]);
    }
    if(wch.indexOf('y')== -1) A.length= 5;
    if(wch.indexOf('d')== -1) A.splice(0, 2);
    day= A.join('');
    if(wch2) day+= ' '+D.timeString(wch2);
    return day;
}
Date.prototype.timeString= function(sec){
    var D= this, A;
    sec= sec || '';
    var h= D.getHours();
    var w= h<12? ' am':' pm';
    if(sec===sec.toUpperCase())w=w.toUpperCase();
    if(h>12) h-= 12;
    else if(h== 0) h= 12;
    A= [h, String(D.getMinutes()).padZero(2)];
    if(/s/i.test(sec)) A[2]= String(D.getSeconds()).padZero(2);
    if(/ms/i.test(sec)) A[3]= String(D.getMilliseconds()).padZero(3);
    return A.join(':')+w;
}

jeez... nicely done, but why wouldn't you use an existing library? — Hristo, Apr 11 '12 at 06:04
@Hristo- I wrote this in 1998, before there were many javascript libraries around. — kennebec, Apr 11 '12 at 06:20
@kennebec... omg hahaha... awesome! I was in 3rd grade in 1998 :D at any rate, do check out moment.js! its really neat :) — Hristo, Apr 11 '12 at 06:29

Change date string and change DIV background color via onclick

4 Answers4