正在尝试加载具有HTML5输入类型=Date元素的ASP文本框

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

本文关键字：元素 Date ASP 文本 类型 输入 加载 HTML5      更新时间：2023-09-26

我正在尝试使用新的HTML5输入type=date来加载和带有日期值的asp:textbox。我要么一无所获（空标签），要么得到（System.Web.UI.WebControls.TextBox）。我只是想使用HTML5日期输入类型。不知道问题是在我的javascript中还是在哪里。用户将：1.通过html5日期选择器选择他们的出生日期。2.用户点击提交按钮3.此时日期选择器已失去焦点4.javascript函数"onblur"应该启动5.asp:textbox"tbDOB"应该加载日期6.该日期会被发送回服务器
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
    }

将blurFunction()中的第一行更改为以下行：

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

修复/解决方案，

  1. 我忽略了发布我正在使用一个母版页（我的坏），该母版页将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   
 }
相关文章：