CODEWITHSUNDEEP
javascriptasp.net
user1422348
user1422348

Reputation: 355

Changing date entered in textbox to another format using javascript asp.net

I've been looking at forums and tutorials all day, and I can't seem to figure this out. I'm 100% new to asp.net and web design (html, etc); I have been using winforms and vb.net for a few months now.

I have a textbox (ID=DOBTextbox) on a page, and I'm trying to implement javascript code that, when the textbox text length is at least 6 chars (or better yet, can be evaluated as a date), the text changes to a specific date format (preferably MMM dd, yyyy, but I'd be willing to use a built-in javascript date converter function that gets it close). I want to use javascript because I want it to be client-driven.

Following many of the examples along these lines, I understand that I need to create a function in my source file, and I can add an attribute to my code-behind file.

<script type="text/javascript">
function reformatDate(inputDate) {
    var outputDate = inputDate.toString();
    return outputDate;
}
</script>

And in my code-behind:

DOBTextBox.Attributes.Add("onblur", "reformatDate('" & DOBTextBox.Text & "')")

However, nothing happens when I leave the textbox.

Note: I used "onblur" because I kept trying things out. My first preference is an event that fires when the user changes the text of the textbox. Also, I used ".tostring()" in my function because I got an error saying that todatestring() wasn't recognized (I think todatestring() output is closer to the format I'd like).

Thanks in advance for any help!!!

Upvotes: 1

Views: 3212

Answers (1)

Ian
Ian

Reputation: 50923

You probably want this:

DOBTextBox.Attributes.Add("onblur", "reformatDate(this.value);")

With your code, you're trying to combine ASP.NET code and javascript. ASP.NET is static when sent to the browser, javascript is dynamic. When you use your code, you're hardcoding the value of the textbox at the time your ASP.NET code is run into the attribute. So the HTML will probably render as something like:

<input type="text" id="whatever" name="whatever" value="10/24/2001" onblur="reformatDate('10/24/2001')" />

With my change, it will make javascript grab the textbox's value at the time it is blurred and pass it to the reformatDate function. So it will be rendered as something like:

<input type="text" id="whatever" name="whatever" value="10/24/2001" onblur="reformatDate(this.value)" />

Something you may want is to use onchange, not onblur, so that the function only fires when the textbox's value changes, not just if the textbox is blurred.

UPDATE:

The ASP.NET code needs changed to:

DOBTextBox.Attributes.Add("onblur", "this.value = reformatDate(this.value);")

so that the value of the textbox is re-set to the converted value.

UPDATE2:

Try changing your function to:

function reformatDate(inputDate) {
    if (inputDate.length > 5) {                  // Least amount of characters for possible date
        var outputDate = new Date(inputDate);    // Convert input to date object
        if (!isNaN(outputDate.getTime())) {      // Makes sure the date is valid
            return outputDate.toDateString();    // Return formatted date only if valid
        }
    }
    return inputDate;    // Return original value if invalid date
}

Upvotes: 1

Related Questions