Question

我尝试使用新的HTML5输入类型=日期加载和使用日期值的asp：textbox。我要么得到任何东西（空标签），要么得到（System.Web.UI.WebControls.TextBox）。我只想尝试使用HTML5日期输入类型。不知道问题是在我的javascript中还是在哪里。用户将： 1.通过html5 datepicker选择他们的生日。 2.用户单击“提交”按钮 3.此时，日期选择器失去了焦点 4. javascript函数＆＃34; onblur＆＃34;应该踢 5. asp：textbox＆＃34; tbDOB＆＃34;应该加载日期那个日期得到了＃39;送回服务器。
7.此时，出于验证目的，日期应更新lblDateReturn标签。

由于 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

修复/解决方案，

我忽略了发帖说我正在使用一个母版页（我的坏），它将ASP文本框的ID从“tbDOB”更改为“ContentPlaceHolder1_tbDOB”。

HTML5类型日期：

    <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脚本：

 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   
 }

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

2 个答案: