尝试使用HTML5输入type = Date元素加载ASP文本框

Question

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
    }

Answer 1

用下面的行更改blurFunction()的第一行：

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

Answer 2

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   
 }