PDA

Click to See Complete Forum and Search --> : 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
<!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:


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


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

<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/script2/tengcalendar.shtml
flames_fan
10-18-2005, 02:08 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.


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 /.



<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


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

<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.
konithomimo
10-19-2005, 08:22 AM
EDITED
flames_fan
10-19-2005, 12:01 PM
konithomimo - yep that works like a charm, thank you very much!!
konithomimo
10-19-2005, 12:04 PM
You are welcome. i agree though, you should leave in the original programmers comments.
flames_fan
10-19-2005, 01:19 PM
advice take, I've added it back it in.