CODEWITHSUNDEEP
javascriptc#asp.nethtml
Suge
Suge

Reputation: 39

Trying to load an ASP textbox with HTML5 input type=Date element

I'm trying to use the new HTML5 input type=date to load and asp:textbox with the date value. I either get nothing (empty label) back or I get (System.Web.UI.WebControls.TextBox). I'm trying just to use the HTML5 date input type. Don't know if the problem is in my javascript or where. The user will: 1. select they're birthdate via the html5 datepicker. 2. The user clicks the submit button 3. at which time the datepicker has lost focus 4. The javascript function "onblur" should kick in 5. The asp:textbox "tbDOB" should get loaded with the date 6. That date gets' sent back back to server.
7. At that point for verification purposes the date should update the lblDateReturn label.

Thanks Suge 

       <div id="dpDOB">
            <asp:TextBox ID="tbDOB" runat="server"></asp:TextBox><br />
            <input type="date" id="dpDatePicker" onblur="blurFunction()" required /><br />
            <asp:Button ID="btnDOB" runat="server" Text="Submit" OnClick="btnDOB_Click()" /><br/>
            <asp:Label ID="lblDateReturn" runat="server" Text=""></asp:Label>                
        </div> 


 function blurFunction()
 {
    var dateofBirth = document.getElementById("tbDOB"); //asp.net textbox
    var datepicker = document.getElementById("dbDatePicker"); 
    dateofBirth.value = datepicker.value; // Trying to load the asp.net textbox with the date
    alert("Date Picker lost focus");
 }

    protected void btnDOB_Click(object sender, EventArgs e)
    {
        //lblDateReturn.Text = tbDOB.Text; blank lable
        lblDateReturn.Text = tbDOB.ToString(); //I get back: System.Web.UI.WebControls.TextBox
    }

Upvotes: 0

Views: 939

Answers (2)

Suge
Suge

Reputation: 39

The fix/solution,

  1. I neglected to post that I am using a master page (my bad) which changed the id of the ASP textbox from "tbDOB" to "ContentPlaceHolder1_tbDOB".

HTML5 type date:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    
        <div id="dpDOB">
            <asp:TextBox ID="tbDOB"  runat="server"></asp:TextBox><br />
            <input type="date" id="dpDatePicker" onblur="blurFunction()" required /><br />
            <asp:Button ID="btnDOB" runat="server" Text="Submit" OnClick="btnDOB_Click"/> <br />
            <asp:Label ID="lblDateReturn" runat="server" Text=""></asp:Label>                
        </div>       
 </asp:Content>

Java Script:

 function blurFunction()
 {    
     var datepicker = document.getElementById("dpDatePicker");    
     (document.getElementById("ContentPlaceHolder1_tbDOB")).value = datepicker.value;    
 }

C#:

  protected void btnDOB_Click(object sender, EventArgs e) 
  {
      lblDateReturn.Text = tbDOB.Text;              
  }

CSS3:

 #ContentPlaceHolder1_tbDOB
 {
  display: none; //Hiding the textbox to make it appear the HTML5 type (date) picker is the only control   
 }

Upvotes: 0

cherisys
cherisys

Reputation: 11

Change the first line in blurFunction() with the line below:

var dateofBirth = document.getElementById("<%=tbDOB.ClientID%>");

Upvotes: 1

Related Questions