/    Sign up×
Community /Pin to ProfileBookmark

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!

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

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

to post a comment
JavaScript

18 Comments(s)

Copy linkTweet thisAlerts:
@CharlesOct 18.2005 — <!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>
Copy linkTweet thisAlerts:
@konithomimoOct 18.2005 — Or:

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script language="Javascript"&gt;
&lt;!--
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
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="showdate()"&gt;
&lt;form name="date"&gt;
&lt;input type=text size=11 name="forms"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

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.
Copy linkTweet thisAlerts:
@flames_fanauthorOct 18.2005 — 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>
[/CODE]
Copy linkTweet thisAlerts:
@flames_fanauthorOct 18.2005 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;meta name="Content-Style-Type" content="text/css"&gt;
&lt;title&gt;Example&lt;/title&gt;

&lt;script type="text/javascript"&gt;
Date.prototype.toDateString = function () {return isNaN (this) ? 'NaN' : [this.getMonth() &lt; 9 ? '0' + (this.getMonth() + 1) : this.getMonth() + 1, this.getDate() &lt; 10 ? '0' + this.getDate() : this.getDate(), this.getFullYear()].join ('/')}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;label&gt;Date&lt;input name="date" onchange="this.value = new Date (this.value).toDateString()" type="text"&gt;&lt;/label&gt;
&lt;/body&gt;
&lt;/html&gt;
[/QUOTE]



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

Thanks.
Copy linkTweet thisAlerts:
@CharlesOct 18.2005 — 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.
Copy linkTweet thisAlerts:
@konithomimoOct 18.2005 — Just use getElementById()
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script language="Javascript"&gt;
&lt;!--
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;
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="showdate()"&gt;
&lt;/body&gt;
&lt;/html&gt;


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
Copy linkTweet thisAlerts:
@flames_fanauthorOct 18.2005 — 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.[/QUOTE]


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.
Copy linkTweet thisAlerts:
@konithomimoOct 18.2005 — 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 /.

<i>
</i>
&lt;html&gt;
&lt;head&gt;
&lt;script language="Javascript"&gt;
&lt;!--
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;
}
}

//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
DOB:
&lt;input name="mydate" id="mydate" value="" type="text" size="8"&gt;
&lt;input type="button" name="dobsubmit" value="Submit" onclick="inputDOB(document.getElementById('mydate').value)"&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@flames_fanauthorOct 18.2005 — Is it possible to format it either as it's being typed in or on tab?
Copy linkTweet thisAlerts:
@flames_fanauthorOct 18.2005 — 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>

[/CODE]
Copy linkTweet thisAlerts:
@konithomimoOct 19.2005 — Is it possible to format it either as it's being typed in or on tab?[/QUOTE]

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.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
//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 &lt; 1)||(y &lt; 1900)||(d &lt; 1)||(d &gt; 31)||(m &gt;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;
}
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
DOB(mmddyyyy):
&lt;asp:TextBox id=txtSingleDOB runat="server" Width="100%" Text='&lt;%# this.Profile.Customer.DateOfBirth == DateTime.MinValue ? "" : this.Profile.Customer.DateOfBirth.ToString("d") %&gt;' MaxLength="10" onkeyup="this.value=this.value.replace(/D/,'')" onblur="inputDOB(document.getElementById('txtSingleDOB').value)"&gt;&lt;/asp:TextBox&gt;
&lt;/body&gt;
&lt;/html&gt;


EDIT: I deleted the first script and made this one work like you probably want.
Copy linkTweet thisAlerts:
@konithomimoOct 19.2005 — Let me know if that works correctly. I might need to tweak it.
Copy linkTweet thisAlerts:
@vwphillipsOct 19.2005 — flames_fan

This is what I'm using for the phone numbers and it works great[/QUOTE]

free scripts and you dont have the manners to leave the credits in!!!!!
Copy linkTweet thisAlerts:
@konithomimoOct 19.2005 — I have tested my script, and it works perfectly with tab. Just use the second one since that is most likely what you want.
Copy linkTweet thisAlerts:
@konithomimoOct 19.2005 — EDITED
Copy linkTweet thisAlerts:
@flames_fanauthorOct 19.2005 — konithomimo - yep that works like a charm, thank you very much!!
Copy linkTweet thisAlerts:
@konithomimoOct 19.2005 — You are welcome. i agree though, you should leave in the original programmers comments.
Copy linkTweet thisAlerts:
@flames_fanauthorOct 19.2005 — advice take, I've added it back it in.
×

Success!

Help @flames_fan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...