ASP.NET/C#：如何处理日期输入框聚焦事件并填充出生日期占位符

一、核心问题说明 #

原生HTML5 date 类型输入框的 placeholder 属性在多数浏览器中不会直接生效，且ASP.NET的 TextBox 设为 TextMode="Date" 后，需要传入**ISO 8601格式（yyyy-MM-dd）**的日期值才能正确显示。你的原代码中 onfocus 事件的写法可以简化，同时要实现“填充出生日期值”的需求，需要结合后端绑定和前端逻辑。

二、完整实现方案 #

1. ASPX页面代码优化 #

调整 TextBox 的配置，确保后端能正确绑定日期值，同时优化聚焦逻辑（现代浏览器无需重复设置type）：

<asp:TextBox ID="txtdob" 
             TextMode="Date" 
             CssClass="form-control" 
             placeholder="请选择出生日期"
             runat="server"></asp:TextBox>

注：若需兼容不支持HTML5 date类型的旧浏览器，可保留切换type的逻辑：

<asp:TextBox ID="txtdob" 
             TextMode="Text" 
             CssClass="form-control" 
             placeholder="请选择出生日期"
             onfocus="this.type='date'"
             runat="server"></asp:TextBox>

2. 后端C#绑定出生日期值 #

在页面的 Page_Load 或数据绑定事件中，将出生日期值格式化为ISO 8601格式后赋值给TextBox：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 示例：从数据库/模型获取出生日期（假设为DateTime类型）
        DateTime dob = new DateTime(1990, 5, 15);
        // 格式化为yyyy-MM-dd，适配原生date输入框
        txtdob.Text = dob.ToString("yyyy-MM-dd");
    }
}

3. 前端占位符兼容处理（可选） #

由于原生date输入框不支持自定义占位符显示，可通过CSS+JS实现模拟效果：

<style>
.date-wrapper {
    position: relative;
}
.date-wrapper::after {
    content: attr(data-placeholder);
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.date-wrapper.has-value::after {
    display: none;
}
</style>

<div class="date-wrapper" data-placeholder="请选择出生日期">
    <asp:TextBox ID="txtdob" 
                 TextMode="Date" 
                 CssClass="form-control" 
                 runat="server"
                 onchange="this.parentElement.classList.toggle('has-value', this.value !== '')"></asp:TextBox>
</div>

<script>
// 页面加载时检查初始值，更新占位符状态
window.onload = function() {
    const txt = document.getElementById('<%= txtdob.ClientID %>');
    if (txt.value) {
        txt.parentElement.classList.add('has-value');
    }
}
</script>

三、关键注意事项 #

• 原生 date 输入框仅接受 yyyy-MM-dd 格式的字符串，后端赋值时必须严格遵循此格式，否则无法正确显示日期。
• 若使用 TextMode="Date"，ASP.NET会自动渲染为HTML5的 <input type="date">，无需手动在onfocus中设置type。
• 针对不支持HTML5 date类型的旧浏览器，可考虑使用第三方日期选择插件（如jQuery UI Datepicker）替代原生控件。

内容的提问来源于stack exchange，提问作者Pravin Yadav