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

Question

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

WHy not use jquery datepicker and set format in setup so that date is displayed in correct format when selected? refer - jqueryui.com/datepicker and docs.jquery.com/UI/Datepicker/formatDate — rs.
– rs., Commented Oct 15, 2012 at 3:56
toDateString (notice the capital letters) is a method, but it's only a Date object's method - developer.mozilla.org/en-US/docs/JavaScript/Reference/… — Ian
– Ian, Commented Oct 15, 2012 at 4:00

Ian · Accepted Answer · 2012-10-15 04:24:16Z

1

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
}

edited Oct 15, 2012 at 4:24

answered Oct 15, 2012 at 3:44

Ian

51k13 gold badges104 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ian Over a year ago

So yeah, sorry, the reformatDate function really just returns the value back. You need to set the textbox's value with the result of the function as well. So I'll update my answer with re-setting the textbox's value, but we also need to rework the function's code for converting (since all it does is return the value.toString(), which isn't really anything)

Ian Over a year ago

What format do you expect the textbox's value to be so that it can be converted to a date? You said at least 6 characters

user1422348 Over a year ago

I would like the value to be MMM dd, yyyy (so Sep 23, 2005) if possible. If not, something close. This way, when I input 9/23/05, it should change to Sep 23, 2005.

user1422348 Over a year ago

The reason I said 6 characters is because I assumed that I it would be an "onblur" event, and I only wanted it triggered if a valid date was even possible (i.e. the smallest number of characters to make a date - with slashes or dashes - is 6); although I'd rather something more precise, but I'm still playing with it and I obviously have A LOT of javascript to learn.

Ian Over a year ago

@user1422348 I just updated my answer again. I'm still looking for a way to check if the date is even valid before it's returned (in case you type in "asf" or something, so it won't change the value to "Invalid Date"). But yeah, you probably want onchange because onblur executes every time the textbox loses focus, no matter whether the value has actually changed or not. onchange executes only if the user actually changes the value and blurs.

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related