trying to get field to format a date - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

trying to get field to format a date

ajax

xboxingman

4:05 am on Jan 5, 2012 (gmt 0)

10+ Year Member

I want the date to automatically add the slashes, I would rather it do it as the user types 00 *add slash* 00 *add slash* 0000

This code sort of works but at the same time doesn't can someone please help me.

THANK YOU

$("#birthdate").change(function() {
var dob = $("#birthdate").val();
var blnIsNumber=true;
var strValidChars = "0123456789/";
var strChar;
var intStrLength;
if(dob.length >= 10){
$("#dobstatus").html('<ul class="titlebar"><img src="tick.gif"></ul>');
$("#birthdate").removeClass('object_error');
$("#birthdate").addClass("object_ok");
} else {
if (dob.length != 8 && dob.length != 10) {
$("#dobstatus").html('<ul class="titlebar"><font color="gold">invalid date length</font></ul>');
$("#birthdate").removeClass('object_ok');
$("#birthdate").addClass("object_error");
} else {
for (i = 0; i < dob.length && blnIsNumber == true; i++) {
strChar = dob.charAt(i);
if (strValidChars.indexOf(strChar) == -1) {
blnIsNumber = false;
}
}
}
// If we have a problem, let's notify the operator.
if (blnIsNumber == false) {
$("#dobstatus").html('<ul class="titlebar"><font color="gold">invalid date format</font></ul>');
$("#birthdate").removeClass('object_ok');
$("#birthdate").addClass("object_error");
} else {
// If NOT, do we need to add the slashes? If so, let's add them
// and write it back out to the form.
if ((dob.substr(2,1) != "/") && (dob.substr(5,1) != "/")) {
strChar = dob.toString();
dob = dob.substr(0,2) + "/" + dob.substr(2,2) + "/" +dob.substr(4,4);
document.formName["#birthdate"].value = dob;
$("#dobstatus").html('<ul class="titlebar"><img src="tick.gif"></ul>');
$("#birthdate").removeClass('object_error');
$("#birthdate").addClass("object_ok");
}
}
}
});

penders

9:22 am on Jan 5, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Have you seen this working successfully somewhere else?

My gut feeling (not wanting to put down innovation) is that this is a lot of work to get right (if that is even possible) for very little gain and too much potential to annoy the user.

What if the user types a slash? Block it?
What if the user types "1/2"? - The beginnings of a valid date
What if the user has typed "12/34/" and goes back and deletes the "3"?

xboxingman

2:01 pm on Jan 5, 2012 (gmt 0)

10+ Year Member

I have seen this on other sites. I'm basically just trying to get it to validate onBlur that it was entered properly.

This is working code here which gives an alert to the user if it is invalid but I was trying to get it to work with the rest of the validation script I have written.

<html>
<head>
<title></title>
<script>
function fnIsDate(strText, strDateField) {
var strValidChars = "0123456789/";
var blnIsNumber=true;
var strChar;
var strField;
var intStrLength;

//
// First, let's see if it is 8 or 10 characters long.
// If 8, hopefully they are numbers....
//

if (strText.length != 8 && strText.length != 10) {
blnIsNumber = false;
} else {

//
// OK, well we have either 8 or 10 characters, let's make sure they are numbers...
//

for (i = 0; i < strText.length && blnIsNumber == true; i++) {
strChar = strText.charAt(i);
if (strValidChars.indexOf(strChar) == -1) {
blnIsNumber = false;
}
}
}

//
// If we have a problem, let's notify the operator.
//

if (blnIsNumber == false) {
alert("ERROR! " + strText + " is not a valid date.\n\nDate MUST be MMDDYYYY or MM/DD/YYYY");
} else {

//
// If NOT, do we need to add the slashes? If so, let's add them
// and write it back out to the form.
//

if ((strText.substr(2,1) != "/") && (strText.substr(5,1) != "/")) {
strText = strText.toString();
strField = strText.substr(0,2) + "/" + strText.substr(2,2) + "/" +strText.substr(4,4);
document.form1[strDateField].value = strField;
}
}
}
</script>
</head>
<body>
<form name="form1">
<input name="date0" type=text length=10 onBlur="javascript:fnIsDate(document.form1.date0.value, 'date0')">
<input name="date1" type=text length=10 onBlur="javascript:fnIsDate(document.form1.date1.value, 'date1')">
<input name="date2" type=text length=10 onBlur="javascript:fnIsDate(document.form1.date2.value, 'date2')">
<button type="reset" name="reset">
</form>
</body>
</html>

I basically just want to allow 00/00/0000 and if they type some thing like 1/3/1998 would change to 01/03/1998 and so on. If it seems like to much of a challenge I can just stick to validating that it is a number allowing 01031998 and finish the rest of the validating in my php.
thanks