title: ASP.NET Ajax Toolkit Watermark control issue & Javascript date question
body: <p>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.</p>
  
  <p>3 control make up a "Date Issued" text box and similarly, 3 more control make up a "Expiration Date" set of controls.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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 &lt;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.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>        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 &amp;&amp; ExpireDayOfMonth == -1 &amp;&amp; (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();
              }
  </code></pre>
  
  <p>The 3 controls of each date group are included in a usercontrol (ASCX file):</p>
  
  <pre><code>    &lt;asp:DropDownList ID="ddlMonth" runat="server"&gt;
      &lt;/asp:DropDownList&gt;
      &lt;asp:DropDownList ID="ddlDate" runat="server"&gt;
      &lt;/asp:DropDownList&gt;
      &lt;asp:TextBox ID="txtYear" runat="server" Width="85px" &gt;&lt;/asp:TextBox&gt;            
      &lt;asp:CustomValidator ID="CustomValidator1" runat="server" 
          EnableClientScript="true" Required="True"
          ErrorMessage="CustomValidator" ClientValidationFunction="validateDate" 
          ValidateEmptyText="True"&gt;&lt;/asp:CustomValidator&gt;
  </code></pre>
  
  <p>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 &lt;%- servercontrol.ClientId %> approach too, I would be willing to give it a try.</p>
  
  <p>THANK YOU!</p>
  
  <pre><code> &lt;select name="dtmPassportExpirationDate$ddlMonth" id="dtmPassportExpirationDate_ddlMonth" class="DefaultDropDown"&gt;
  &lt;option value="-1"&gt;--Month--&lt;/option&gt;
  &lt;option value="1"&gt;Jan&lt;/option&gt;
  &lt;option value="2"&gt;Feb&lt;/option&gt;
  &lt;option value="3"&gt;Mar&lt;/option&gt;
  &lt;option value="4"&gt;Apr&lt;/option&gt;
  &lt;option value="5"&gt;May&lt;/option&gt;
  &lt;option value="6"&gt;Jun&lt;/option&gt;
  &lt;option value="7"&gt;Jul&lt;/option&gt;
  &lt;option value="8"&gt;Aug&lt;/option&gt;
  &lt;option selected="selected" value="9"&gt;Sep&lt;/option&gt;
  &lt;option value="10"&gt;Oct&lt;/option&gt;
  &lt;option value="11"&gt;Nov&lt;/option&gt;
  &lt;option value="12"&gt;Dec&lt;/option&gt;
  
  &lt;select name="dtmPassportExpirationDate$ddlDate" id="dtmPassportExpirationDate_ddlDate" class="DefaultDropDown"&gt;
  &lt;option value="-1"&gt;--Day--&lt;/option&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option selected="selected" value="3"&gt;3&lt;/option&gt;
  &lt;option value="4"&gt;4&lt;/option&gt;
  &lt;option value="5"&gt;5&lt;/option&gt;
  &lt;option value="6"&gt;6&lt;/option&gt;
  &lt;option value="7"&gt;7&lt;/option&gt;
  &lt;option value="8"&gt;8&lt;/option&gt;
  &lt;option value="9"&gt;9&lt;/option&gt;
  &lt;option value="10"&gt;10&lt;/option&gt;
  &lt;option value="11"&gt;11&lt;/option&gt;
  &lt;option value="12"&gt;12&lt;/option&gt;
  &lt;option value="13"&gt;13&lt;/option&gt;
  &lt;option value="14"&gt;14&lt;/option&gt;
  &lt;option value="15"&gt;15&lt;/option&gt;
  &lt;option value="16"&gt;16&lt;/option&gt;
  &lt;option value="17"&gt;17&lt;/option&gt;
  &lt;option value="18"&gt;18&lt;/option&gt;
  &lt;option value="19"&gt;19&lt;/option&gt;
  &lt;option value="20"&gt;20&lt;/option&gt;
  &lt;option value="21"&gt;21&lt;/option&gt;
  &lt;option value="22"&gt;22&lt;/option&gt;
  &lt;option value="23"&gt;23&lt;/option&gt;
  &lt;option value="24"&gt;24&lt;/option&gt;
  &lt;option value="25"&gt;25&lt;/option&gt;
  &lt;option value="26"&gt;26&lt;/option&gt;
  &lt;option value="27"&gt;27&lt;/option&gt;
  &lt;option value="28"&gt;28&lt;/option&gt;
  &lt;option value="29"&gt;29&lt;/option&gt;
  &lt;option value="30"&gt;30&lt;/option&gt;
  &lt;option value="31"&gt;31&lt;/option&gt;
  
  &lt;input name="dtmPassportExpirationDate$txtYear" type="text" value="2009" maxlength="4" id="dtmPassportExpirationDate_txtYear" class="DefaultTextBox" style="width:68px;" /&gt;
  
  
  &lt;input name="dtmPassportExpirationDate$btnClear" type="button" id="dtmPassportExpirationDate_btnClear" style="font-size: x-small; height: 20px;" value="Clear" tabindex="-1" onClick="ClearDate_dtmPassportExpirationDate();" /&gt;&lt;/td&gt;
  
  &lt;input type="hidden" name="dtmPassportExpirationDate$TextBoxWatermarkExtender1_ClientState" id="dtmPassportExpirationDate_TextBoxWatermarkExtender1_ClientState" /&gt;
  </code></pre>