Easy Date Format

**flames_fan** · 10-18-2005 01:02 PM

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.

**Charles** · 10-18-2005 01:45 PM

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>

**konithomimo** · 10-18-2005 01:49 PM

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.

**flames_fan** · 10-18-2005 01:56 PM

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>

**flames_fan** · 10-18-2005 01:57 PM

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.

**Charles** · 10-18-2005 02:02 PM

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.

**konithomimo** · 10-18-2005 02:04 PM

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

**flames_fan** · 10-18-2005 02:08 PM

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.

**konithomimo** · 10-18-2005 02:21 PM

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>

**flames_fan** · 10-18-2005 02:53 PM

Is it possible to format it either as it's being typed in or on tab?

**flames_fan** · 10-18-2005 03:10 PM

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>

**konithomimo** · 10-19-2005 05:22 AM

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.

**konithomimo** · 10-19-2005 05:32 AM

Let me know if that works correctly. I might need to tweak it.

**vwphillips** · 10-19-2005 07:22 AM

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!!!!!

**konithomimo** · 10-19-2005 07:59 AM

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: Easy Date Format

Thread Tools

Display

Easy Date Format

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions