SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Catching HTML 5 input type="date" date change with JS

    I'm using the HTML 5 date input type (I do understand many browsers don't support it). The problem is it always displays the selected date in the format 2012-01-25 where I want 25/01/2012.

    I believe JavaScript could catch the value HTML 5 enters in the input field and change it.

    Is there a simple, ready-made script for this?

    I'm guessing 'onchange' and to check for the yyyy-dd-mm date type, but if someone can at least give me a pointer as to how I would check for the yyyy-dd-mm date type and then change it.

    I'll ensure the server accepts both date types just in case JS is off / not functioning on that device, but this would improve display for many devices.

    <input type="date" name='dob' id='dob' /> is the kind of thing I'm looking at.

  2. #2
    Non-Member
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't it be better to have separate select lists for the day, month and year values? I mean, even when you do reformat the date components to the format you want, how will you know if a user accidentally entered 03/05/2011 instead of 05/03/2011?

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Select boxes are slow and rubbish for dates.

    But, in fact you've given me an idea.

    I will use your select boxes for non-JavaScript devices (to be certain + for rubbish mobiles).

    If JS available AND HTML 5 date type (Opera etc.), then I will use the HTML 5 date type with a proper pop-up calendar ensuring they can't enter the wrong format.

    If JS but no HTML 5 date type then I will use jQuery calendar tool (calendar so no probs with correct date format of dd/mm/yyyy).

    Based on this I still need my question answering though.

    Does anyone know how to do it?

  4. #4
    Non-Member
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    Select boxes are slow and rubbish for dates.
    ok if you think so

    In that case, just use the split() function to break up the entered date into its components. Then re-assemble the split date components into whatever format you like. It's no more than 2-3 lines of code, tops.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •