Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Location
    Australia
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing date format to dd-mm-yyyy in datepicker

    Hi ...I wanted to implement a cross browser HTML5 pop up calendar control into a form and came across this page:

    http://www.javascriptkit.com/javatut...ntcheck2.shtml

    I implemented the code and all worked smoothly. I wanted this for an Australian website and discovered once I had implemented it that the displayed date format after the date has been picked, is US i.e. mm-dd-yyyy.

    I have tried to work out where I need to go to change the code to so that the date format is dd-mm-yyyy but am at a loss to find it.

    Could anyone assist me with this. Thanks

    Also will there be two changes required, one for the HTML5 and one for js

    K

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <script type="text/javascript">
        var datefield=document.createElement("input")
        datefield.setAttribute("type", "date")
        if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
            document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
            document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
            document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
        }
    </script>
    
    <script>
    if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($){ //on document.ready
            $('#birthday').datepicker();
        })
    }
    </script>
    </head>
    
    <body>
    <form>
    <b>Date of birth:</b>
    <input type="date" id="birthday" name="birthday" size="20"/>
    <input type="button" value="Submit" name="B1"></p>
    </form>
    <script type="text/javascript">
    /*<![CDATA[*/
    function Format(id){
     var obj=document.getElementById(id),d=obj.value.split('/');
     if (d.length==3){
      obj.value=d[1]+'-'+d[0]+'-'+d[2];
     }
    }
    
    setInterval(function(){  Format('birthday'); },1000);
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    kevin2e (05-07-2013)

  • #3
    New to the CF scene
    Join Date
    May 2013
    Location
    Australia
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Vic ...a neat workaround


  •  

    Posting Permissions

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