www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Easy Date Format

  1. #1
    Join Date
    Oct 2005
    Posts
    8

    Easy Date Format

    Hello,

    I got a free script on date format for forms but it's much more complicated than I need. It displays three different date formats when I need only one.

    MM/DD/YYYY is all I need. Could someone possibly help me edit this script to work for me, thanks!

    http://javascript.internet.com/forms/format-date.html

    PS - I tried to put the code in this post but it was to big.

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    
    <script type="text/javascript">
    Date.prototype.toDateString = function () {return isNaN (this) ? 'NaN' : [this.getMonth() < 9 ? '0' + (this.getMonth() + 1) : this.getMonth() + 1, this.getDate() < 10 ? '0' + this.getDate() : this.getDate(), this.getFullYear()].join ('/')}
    </script>
    
    </head>
    <body>
    <div>
    <label>Date<input name="date" onchange="this.value = new Date (this.value).toDateString()" type="text"></label>
    </body>
    </html>
    Last edited by Charles; 10-18-2005 at 01:48 PM.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Jan 2005
    Posts
    3,067
    Or:

    Code:
    <html>
    <head>
    <script language="Javascript">
    <!--
    function showdate()
    {
    var today = new Date()
    var month = today.getMonth() + 1
    var day = today.getDate()
    var year = today.getFullYear()
    var s = "/"
    
    document.date.forms.value = month + s + day + s + year
    }
    //-->
    </script>
    </head>
    <body onload="showdate()">
    <form name="date">
    <input type=text size=11 name="forms">
    </form>
    </body>
    </html>
    That doesnt take into account numbers less than 10, but it works none the less, and can be made to work for numbers les than 10.

  4. #4
    Join Date
    Oct 2005
    Posts
    8
    Is it possible to do it without a form or input name, it's going into an asp text box.

    Code:
                            <asp:TextBox id=txtSingleDOB runat="server" Width="100%"  Text='<%# this.Profile.Customer.DateOfBirth == DateTime.MinValue ? "" : this.Profile.Customer.DateOfBirth.ToString("d") %>' MaxLength="10">
    						</asp:TextBox>

  5. #5
    Join Date
    Oct 2005
    Posts
    8
    Quote Originally Posted by Charles
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    
    <script type="text/javascript">
    Date.prototype.toDateString = function () {return isNaN (this) ? 'NaN' : [this.getMonth() < 9 ? '0' + (this.getMonth() + 1) : this.getMonth() + 1, this.getDate() < 10 ? '0' + this.getDate() : this.getDate(), this.getFullYear()].join ('/')}
    </script>
    
    </head>
    <body>
    <div>
    <label>Date<input name="date" onchange="this.value = new Date (this.value).toDateString()" type="text"></label>
    </body>
    </html>

    Charles, thanks for your help...However, when I typed in the date it returned "NaN"

    Thanks.

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    It'll do that if you type in something that the JavaScript interpreter doesn't recognize as a date. Type more carefully and give it another go.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Jan 2005
    Posts
    3,067
    Just use getElementById()
    Code:
    <html>
    <head>
    <script language="Javascript">
    <!--
    function showdate(date)
    {
    var today = new Date();
    var month = today.getMonth() + 1;
    var day = today.getDate();
    var year = today.getFullYear();
    var s = "/";
    
    document.getElementById('txtSingleDOB').value = month + s + day + s + year;
    }
    //-->
    </script>
    </head>
    <body onload="showdate()">
    </body>
    </html>
    if you want your user to be able to enter in a date though then look here:

    http://www.javascriptkit.com/script/...calendar.shtml
    Last edited by konithomimo; 10-18-2005 at 02:07 PM.

  8. #8
    Join Date
    Oct 2005
    Posts
    8
    Quote Originally Posted by Charles
    It'll do that if you type in something that the JavaScript interpreter doesn't recognize as a date. Type more carefully and give it another go.

    Thanks again. Ok I typed this in for example: 09/07/1980 and it returned this: Sun Sept 7 1980.

    All that I need it to do is this.... If I type in 09071980 it formats it to 09/07/1980, or I've also seen it while you are typing it in then forward slash is automatic... 09/ etc.

    Thanks.

  9. #9
    Join Date
    Jan 2005
    Posts
    3,067
    You dont really need a date function for that. All that you need to do is treat it like a string and insert in the /.

    Code:
    <html>
    <head>
    <script language="Javascript">
    <!--
    function inputDOB(dob)
    {
    var DOBlength=dob.length;
    var month = dob.charAt(0) + dob.charAt(1);
    var day = dob.charAt(2) + dob.charAt(3);
    var year = dob.charAt(4) + dob.charAt(5) dob.charAt(6) + dob.charAt(7);
    var s ="/";
    
    if (DOBlength != 8)
    {
    alert('Your DOB must be entered in as 8 consecutive numbers in the format mmddyyyy');
    }
    
    else
    {
    document.getElementById('txtSingleDOB').value = month + s + day + s + year;
    }
    }
    
    //-->
    </script>
    </head>
    <body>
    DOB:
    <input name="mydate" id="mydate" value="" type="text" size="8">
    <input type="button" name="dobsubmit" value="Submit" onclick="inputDOB(document.getElementById('mydate').value)"> 
    </body>
    </html>
    Last edited by konithomimo; 10-18-2005 at 02:31 PM.

  10. #10
    Join Date
    Oct 2005
    Posts
    8
    Is it possible to format it either as it's being typed in or on tab?

  11. #11
    Join Date
    Oct 2005
    Posts
    8
    This is what I'm using for the phone numbers and it works great

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    // The format is specified as a string
    // and passed to the function 'f20_FormatNumber()' on the onkeyup event of a text box
    
    // There can be any number of applications on a page each with a unique format
    
    // All variable, function etc. names are prefixed with 'f20_' to minimise conflicts with other JavaScripts
    
    // Customising Variables
    var f20_TypingColor='blue';
    var f20_CompleteColor='black';
    var f20_WarningColor='RED';
    
    // Functional Code
    
    // NO NEED to Change
    var f20_Temp,f20_Lgth;
    var f20_re=/\D/g;
    var f20_re1=/~/g;
    
    function f20_FormatNumber(f20_obj,f20_tem){
     f20_obj.style.color=f20_CompleteColor;
     f20_re = /\D/g;
     f20_obj.value=f20_obj.value.replace(f20_re,'');
     f20_Temp=f20_tem;
     for (f20_0=0;f20_0<f20_obj.value.length;f20_0++){
      f20_Lgth=f20_Temp.indexOf('~');
      f20_Temp=f20_Temp.replace('~',f20_obj.value.charAt(f20_0));
     }
     if (f20_obj.value.length>0&&(f20_Lgth<0||f20_obj.value.length==f20_tem.match(f20_re1).length)){
      f20_obj.value=f20_Temp.substring(0,f20_tem.length);
      f20_obj.style.color=f20_CompleteColor;
     }
     if (f20_Lgth>=0&&f20_obj.value.length>0){
      f20_obj.value=f20_Temp.substring(0,f20_Lgth+1);
     }
     f20_obj.lgth=f20_tem.length;
    
    }
    
    //-->
    </script>
    
     <asp:TextBox id=txtSingleHomePhone runat="server" Width="100%" Text="<%# this.Profile.Customer.HomePhone %>" MaxLength="14" onkeyup="javascript:f20_FormatNumber(this,'(~~~) ~~~-~~~~');">
    </asp:TextBox>

  12. #12
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by flames_fan
    Is it possible to format it either as it's being typed in or on tab?
    Yes, it is possible. Like in earlier examples, use the onchange method of the text. That will require getting rid of the check to see if it is 8 numbers long though, and changing it to an accumulator that stops inputting numbers into the output area once it reaches 8.

    You can make it so that if they are entering in the numbers to txtSingleDOB and then tab away from it that it will change the text to the format that you want. That sounds more like what you would probably want.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    //This function was written by Konithomimo to help properly format any date that is entered in as an 8 number string. It has not yet been adapted to check for anything besides numbers, or to check if the numbers entered will give an actual date, but can easily be adapted to do so. If you decide to use this script then please leave in these comments.
    //This script has been edited to remove any input besides integers.
    
    function inputDOB(dob)
    {
    var DOBlength=dob.length;
    var month = dob.charAt(0) + dob.charAt(1);
    var day = dob.charAt(2) + dob.charAt(3);
    var year = dob.charAt(4) + dob.charAt(5) + dob.charAt(6) + dob.charAt(7);
    var s ="/";
    var m = eval(month);
    var d = eval(day);
    var y = eval(year);
    
    if (DOBlength != 8)
    {
    alert('Your DOB must be entered in as 8 consecutive numbers in the format mmddyyyy');
    }
    
    if ((m < 1)||(y < 1900)||(d < 1)||(d > 31)||(m >12))
    {
    alert('You have entered in an invalid value for your month, day, or year. Your birth month must be 01-12, your birth day must be 01-31, and your birth year must be 1900 or later.');
    }
    else
    {
    document.getElementById('txtSingleDOB').value = month + s + day + s + year;
    }
    }
    //-->
    </script>
    </head>
    <body>
    DOB(mmddyyyy):
    <asp:TextBox id=txtSingleDOB runat="server" Width="100%"  Text='<%# this.Profile.Customer.DateOfBirth == DateTime.MinValue ? "" : this.Profile.Customer.DateOfBirth.ToString("d") %>' MaxLength="10" onkeyup="this.value=this.value.replace(/\D/,'')" onblur="inputDOB(document.getElementById('txtSingleDOB').value)"></asp:TextBox> 
    </body>
    </html>
    EDIT: I deleted the first script and made this one work like you probably want.
    Last edited by konithomimo; 10-19-2005 at 09:56 AM.

  13. #13
    Join Date
    Jan 2005
    Posts
    3,067
    Let me know if that works correctly. I might need to tweak it.

  14. #14
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    flames_fan

    This is what I'm using for the phone numbers and it works great
    free scripts and you dont have the manners to leave the credits in!!!!!
    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/

  15. #15
    Join Date
    Jan 2005
    Posts
    3,067
    I have tested my script, and it works perfectly with tab. Just use the second one since that is most likely what you want.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles