ASP.NET Ajax Toolkit Watermark control issue & Javascript date question

Question

Hi,

I have a web page that uses three controls to allow a user to specify a date: 2 drop down controls for month and day (where Jan = 1, perhaps a bad choice :-)) and the days of the month (1-31). A text box is used for the year. In the Year text box, I use an AJAX Toolkit Watermark extender found [here][1] to write the literal word "Year" in light grey in the text box. This text disappears when the user sets focus to the text box. If the user enters something in the text box, the text appears in the normal textbox color, else the light grey text "Year" re-appears when the textbox loses focus.

3 control make up a "Date Issued" text box and similarly, 3 more control make up a "Expiration Date" set of controls.

When a user changes the Issue date (for example, the focus of the last control, Issued Year, is lost, I'd like to update the Expiration Date controls to a date value that is 10 years from the Issue date.

The issue is this: If I use Javascript to set the value of the txtExpireYear control, it updates the light grey text watermark text that normally says "Year" to the year number value instead of displaying the value in normal text color and treating the value as if it were typed by the user.

The 2nd issue that I have is getting the year value of the IssueDate. Why does the dtmDateOfIssue.getYear() function return a two-digit year if the year is <2000 and itherwise return a 4-digit year if the year is > 2000? I can probably work around this but I am looking for an explanation.

Thanks in advance.

        function txtIssueYear_OnBlur() {

            //Get sub controls of passport Expiration date
            var ddlExpireMonth = document.getElementById("dtmPassportExpirationDate_ddlMonth");
            var ddlExpireDate = document.getElementById("dtmPassportExpirationDate_ddlDate");
            var txtExpireYear = document.getElementById("dtmPassportExpirationDate_txtYear");

            //Get the individual values of each sub control of the Expiration date
            var ExpireMonth = parseInt(ddlExpireMonth.value);
            var ExpireDayOfMonth = parseInt(ddlExpireDate.value);
            var ExpireYear = parseInt(txtExpireYear.value);

            //If the Expiration Date still contains all the default values, set it to a default 
        //value based on the value of the Date of Issue
            if ( ExpireMonth == -1 && ExpireDayOfMonth == -1 && (isNaN(ExpireYear)) ) {

                //Get sub controls of passport Issue date
                var ddlIssueMonth = document.getElementById("dtmPassportDateOfIssue_ddlMonth");
                var ddlIssueDate = document.getElementById("dtmPassportDateOfIssue_ddlDate");
                var txtIssueYear = document.getElementById("dtmPassportDateOfIssue_txtYear");

                //Get the individual values of each sub control of the Issue date
                var IssueMonth = parseInt(ddlIssueMonth.value);
                var IssueDayOfMonth = parseInt(ddlIssueDate.value);
                var IssueYear = parseInt(txtIssueYear.value);

                var dtmDateOfIssue = new Date(IssueYear, IssueMonth - 1, IssueDayOfMonth); //construct Issue date

                //add 10 years - 1 day to get the default Expiration date
                dtmDateOfIssue.setYear(dtmDateOfIssue.getYear() + 10);
                dtmDateOfIssue.setDate(dtmDateOfIssue.getDate() - 1);

                //Set the Expiration Date
                txtExpireYear.value = dtmDateOfIssue.getYear();
                ddlExpireMonth.value = dtmDateOfIssue.getMonth() + 1;
                ddlExpireDate.value = dtmDateOfIssue.getDate();
            }

The 3 controls of each date group are included in a usercontrol (ASCX file):

    <asp:DropDownList ID="ddlMonth" runat="server">
    </asp:DropDownList>
    <asp:DropDownList ID="ddlDate" runat="server">
    </asp:DropDownList>
    <asp:TextBox ID="txtYear" runat="server" Width="85px" ></asp:TextBox>            
    <asp:CustomValidator ID="CustomValidator1" runat="server" 
        EnableClientScript="true" Required="True"
        ErrorMessage="CustomValidator" ClientValidationFunction="validateDate" 
        ValidateEmptyText="True"></asp:CustomValidator>

This is sent to the browser as the following. Note that the event handler that I am writing Javascript for uses the client side IDs because the client sided script is page-specific. Not sure if that will be clear or will make sense to you. I would prefer an example using the final client side names, but if you again want to offer the <%- servercontrol.ClientId %> approach too, I would be willing to give it a try.

THANK YOU!

 <select name="dtmPassportExpirationDate$ddlMonth" id="dtmPassportExpirationDate_ddlMonth" class="DefaultDropDown">
<option value="-1">--Month--</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option selected="selected" value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>

<select name="dtmPassportExpirationDate$ddlDate" id="dtmPassportExpirationDate_ddlDate" class="DefaultDropDown">
<option value="-1">--Day--</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>

<input name="dtmPassportExpirationDate$txtYear" type="text" value="2009" maxlength="4" id="dtmPassportExpirationDate_txtYear" class="DefaultTextBox" style="width:68px;" />


<input name="dtmPassportExpirationDate$btnClear" type="button" id="dtmPassportExpirationDate_btnClear" style="font-size: x-small; height: 20px;" value="Clear" tabindex="-1" onClick="ClearDate_dtmPassportExpirationDate();" /></td>

<input type="hidden" name="dtmPassportExpirationDate$TextBoxWatermarkExtender1_ClientState" id="dtmPassportExpirationDate_TextBoxWatermarkExtender1_ClientState" />

Answer 1

About your second issue, the getYear function is deprecated, you should use the getFullYear function instead.

Edit: To correctly set the value of a TextBoxWatermark extended control, you should use the MS Ajax $find function to get the object and call the set_Text function:

$find("ctl00_SampleContent_TextBoxWatermarkExtender2").set_Text('value');

or better using the server-side ClientID property of the control:

$find("<%=ExtenderControl.ClientID%>").set_Text('value');

I found the set_Text function by object inspection with Firebug, because it's a shame that there is no documentation of the Client-Side API of the Ajax Control Toolkit...

Answer 2

This explains it:

http://blog.turlov.com/2009/06/how-to-programmatically-set-value-of.html

Answer 3

Ther is an updated version for the latest Ajax control Toolkit release: http://blog.turlov.com/2010/05/how-to-set-programmatically-value-of.html