用JavaScript转换日期格式

Question

I have an input field that on page load looks like this:

<input type="input" id="start_date" name="start_date" value="May 12, 2012"/>

I want the following to happen:

• When a user clicks on the field to enter a date, the format changes to YYYY-MM-DD. (2012-05-12)
• After a user leaves the field, the format changes back to MMM DD, YYYY (May 12, 2012).
• When the data is submitted via post, it is in the format YYYY-MM-DD (2012-05-12).

How would I accomplish this with jQuery?

Answer 1

If you don't want to rely on specific frameworks/plugins, you can do this:

$("#start_date").click(function() {
    var d = new Date($(this).val());
    $(this).val(d.getFullYear() + "-"
        + String(d.getMonth() + 101).slice(-2) + "-"
        + String(d.getDate() + 100).slice(-2));
}).blur(function() {
    // Eventual format checking goes here

    var m = $(this).val().split("-"),
        d = new Date(m[0], m[1] - 1, m[2]),
        s = d.toString().split(" ");
    $(this).val(s[1] + " " + s[2] + ", " + s[3]);
});