469,287 Members | 2,636 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,287 developers. It's quick & easy.

format date in textbox

Hi,
Here is what I'm trying to achieve:
The user enters in the textbox a date. It can be:
02.05.2006 or any other separator...
02052006
020506

any other formats should be forbidden.

When the user leaves the textbox then the date should be displayed as
02 May 2006.

How can I do that?
Thanks

Jun 16 '06 #1
9 14393
sa*************@googlemail.com said the following on 6/16/2006 12:20 PM:
Hi,
Here is what I'm trying to achieve:
The user enters in the textbox a date. It can be:
02.05.2006 or any other separator...
02052006
020506

any other formats should be forbidden.
"any other separator"? Hmmm. Can I use 0 or \ as the separator?

Before gaining success, you are going to have to limit your inputs some
more with regards to the separator.
When the user leaves the textbox then the date should be displayed as
02 May 2006.

How can I do that?


Use select lists.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 16 '06 #2
yes any separator. basically a if the string is 6, 8 or 10 characters
long it's valid:
05/06/2006 -> 10
05062006 -> 8
050606 -> 6

I don't want to use select lists, I want the user to enter the date as
fast as possible with no harsle.
I can still check later if the date is valid using .net functions (I do
asp.net)
All I want is the javascript to format the date as I mentionned earlier
when the textbox loses the focus.

cheers

Randy Webb a écrit :
sa*************@googlemail.com said the following on 6/16/2006 12:20 PM:
Hi,
Here is what I'm trying to achieve:
The user enters in the textbox a date. It can be:
02.05.2006 or any other separator...
02052006
020506

any other formats should be forbidden.


"any other separator"? Hmmm. Can I use 0 or \ as the separator?

Before gaining success, you are going to have to limit your inputs some
more with regards to the separator.
When the user leaves the textbox then the date should be displayed as
02 May 2006.

How can I do that?


Use select lists.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/


Jun 17 '06 #3
sa*************@googlemail.com writes:

Please don't top post.
yes any separator. basically a if the string is 6, 8 or 10 characters
long it's valid:
05/06/2006 -> 10
05062006 -> 8
050606 -> 6


But how about 1-005-07?

Is 050537 the same as 05.05.1937 or 05.05.2037?

If we assume digits cannot be separators, and the format must be
two digits, optional separators, two digits, optional separator,
two or four digits
and two digit-years are after 1970, then the following should work:

---
<style type="text/css">
.error {border:1px solid red;}
</style>
<input type="text" onchange="checkAndFormat(this);">
<input type="button" value="other">
<script type="text/javascript">
var monthName = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
function addErrorClass(elem) {
if (!elem.className.match(/\berror\b/)) {
elem.className += " error";
}
}
function removeErrorClass(elem) {
elem.className = elem.className.replace(/\berror\b(s*)/g,"$1");
}
function checkAndFormat(input) {
var value = input.value;
var match = /^\s*(\d\d)\D*(\d\d)\D*(\d\d(\d\d)?)\s*$/.exec(value);
if (match) {
var date = Number(match[1]);
var month = Number(match[2])-1;
var yearString = match[3];
var year = Number(match[3]);
if (yearString.length == 2) {
year += (year >= 70) ? 1900 : 2000;
}
// check validity of numbers
var actualDate = new Date();
actualDate.setFullYear(year, month, date);
if (actualDate.getDate() != date || actualDate.getMonth() != month) {
// illegal date, e.g., 35/02/06 ot 29/02/05
alert(["baddate",date,month,year,actualDate]);
addErrorClass(input);
} else {
input.value = (date < 10 ? "0" : "") + date + " " +
monthName[month] + " " + year;
removeErrorClass(input);
}
} else {
addErrorClass(input);
}
}
</script>
---
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jun 17 '06 #4
sa*************@googlemail.com wrote:
yes any separator. basically a if the string is 6, 8 or 10 characters
long it's valid:
05/06/2006 -> 10
05062006 -> 8
050606 -> 6

I don't want to use select lists, I want the user to enter the date as
fast as possible with no harsle.
I can still check later if the date is valid using .net functions (I do
asp.net)
All I want is the javascript to format the date as I mentionned earlier
when the textbox loses the focus.


Your problem is that the format you convert it to is not valid by your
criteria, so if the input goes out of focus again, an error will result.
Over to you...

<script type="text/javascript">

var monthNames = ['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'];

function doDate( el, erID )
{
var s = el.value;
var d, m, y;
var erString = 'Not a nice date...';
var len = s.length;
if (10 == len){
d = s.substring(0,2);
m = s.substring(3,5);
y = s.substring(6,10);
} else if (8 == len) {
d = s.substring(0,2);
m = s.substring(2,4);
y = s.substring(4,8);
} else if (6 == len) {
d = s.substring(0,2);
m = s.substring(2,4);
y = '20' + s.substring(4,6);
}
if (checkDate(y,m,d)){
el.value = d + ' ' + monthNames[m-1] + ' ' + y;
erString = '';
}
if (document.getElementById){
document.getElementById(erID).innerHTML = erString;
}
if (erString){
if (el.focus) el.focus();
}
}

function checkDate(y, m, d)
{
m = '' + (m-1);
var checkDate = new Date(y,m,d);
return ( checkDate.getMonth() == m
&& checkDate.getFullYear() == y);
}

</script>

<input type="text" onblur="doDate(this, 'em_Date');">
<span id="em_Date"></span>
--
Rob
Jun 17 '06 #5
Thank you so much! Exactely what I was looking for!
RobG a écrit :
sa*************@googlemail.com wrote:
yes any separator. basically a if the string is 6, 8 or 10 characters
long it's valid:
05/06/2006 -> 10
05062006 -> 8
050606 -> 6

I don't want to use select lists, I want the user to enter the date as
fast as possible with no harsle.
I can still check later if the date is valid using .net functions (I do
asp.net)
All I want is the javascript to format the date as I mentionned earlier
when the textbox loses the focus.


Your problem is that the format you convert it to is not valid by your
criteria, so if the input goes out of focus again, an error will result.
Over to you...

<script type="text/javascript">

var monthNames = ['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'];

function doDate( el, erID )
{
var s = el.value;
var d, m, y;
var erString = 'Not a nice date...';
var len = s.length;
if (10 == len){
d = s.substring(0,2);
m = s.substring(3,5);
y = s.substring(6,10);
} else if (8 == len) {
d = s.substring(0,2);
m = s.substring(2,4);
y = s.substring(4,8);
} else if (6 == len) {
d = s.substring(0,2);
m = s.substring(2,4);
y = '20' + s.substring(4,6);
}
if (checkDate(y,m,d)){
el.value = d + ' ' + monthNames[m-1] + ' ' + y;
erString = '';
}
if (document.getElementById){
document.getElementById(erID).innerHTML = erString;
}
if (erString){
if (el.focus) el.focus();
}
}

function checkDate(y, m, d)
{
m = '' + (m-1);
var checkDate = new Date(y,m,d);
return ( checkDate.getMonth() == m
&& checkDate.getFullYear() == y);
}

</script>

<input type="text" onblur="doDate(this, 'em_Date');">
<span id="em_Date"></span>


--
Rob


Jun 17 '06 #6
sa*************@googlemail.com wrote:
Thank you so much! Exactely what I was looking for!


Lasse's idea of using onchange is much better than my use of onblur.

[...]

--
Rob
Jun 18 '06 #7
JRS: In article <4493ed29$0$31258$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, dated Sat, 17 Jun 2006 21:53:13 remote, seen in
news:comp.lang.javascript, RobG <rg***@iinet.net.au> posted :

function checkDate(y, m, d)
{
m = '' + (m-1);
var checkDate = new Date(y,m,d);
return ( checkDate.getMonth() == m
&& checkDate.getFullYear() == y);
}

Why convert (m-1) to a string when new Date(y, m, d) takes
numeric arguments and .getMonth() returns a Number?

Do you see an advantage, for valid A.D. years, in checking getFullYear
rather than getDate() ?

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
Jun 18 '06 #8
JRS: In article <Yq******************************@comcast.com>, dated
Fri, 16 Jun 2006 15:42:41 remote, seen in news:comp.lang.javascript,
Randy Webb <Hi************@aol.com> posted :
sa*************@googlemail.com said the following on 6/16/2006 12:20 PM:
Hi,
Here is what I'm trying to achieve:
The user enters in the textbox a date. It can be:
02.05.2006 or any other separator...
02052006
020506

any other formats should be forbidden.


"any other separator"? Hmmm. Can I use 0 or \ as the separator?


Digit zero cannot separate digit fields (which is why in my program
NOWMINUS I use i0 to mean "no separator", i already meaning "space
separator".

I see no real difficulty in using \, though it might break some code.

If D M & Y are separated numeric fields, the OP can allow single-digit D
& M; single-digit Y is unreasonable.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jun 18 '06 #9
Dr John Stockton said the following on 6/18/2006 9:23 AM:
JRS: In article <Yq******************************@comcast.com>, dated
Fri, 16 Jun 2006 15:42:41 remote, seen in news:comp.lang.javascript,
Randy Webb <Hi************@aol.com> posted :
sa*************@googlemail.com said the following on 6/16/2006 12:20 PM:
Hi,
Here is what I'm trying to achieve:
The user enters in the textbox a date. It can be:
02.05.2006 or any other separator...
02052006
020506

any other formats should be forbidden.

"any other separator"? Hmmm. Can I use 0 or \ as the separator?


Digit zero cannot separate digit fields (which is why in my program
NOWMINUS I use i0 to mean "no separator", i already meaning "space
separator".

I see no real difficulty in using \, though it might break some code.


It was a rhetorical question John. Nothing more, nothing less and it
made my point.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 18 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

16 posts views Thread by Al Reid | last post: by
2 posts views Thread by Derek Vincent | last post: by
20 posts views Thread by andreas | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.