ASP.NET WebForms免费DateTimePicker控件及格式转换求助

一、免费DateTimePicker控件选项 #

1. 原生HTML5 datetime-local 控件 #

无需引入任何外部库，直接给ASP.NET TextBox添加type="datetime-local"属性即可：

<asp:TextBox ID="DateTimeTextBox" runat="server" type="datetime-local"></asp:TextBox>

现代主流浏览器均支持该控件，仅需处理后续格式转换问题（见下文）。

2. jQuery UI Datepicker + Timepicker Addon #

这是一套免费的开源控件组合，支持日期和时间选择：

• 引入依赖库（jQuery、jQuery UI及时间扩展插件）
• 初始化控件：

<asp:TextBox ID="DateTimeTextBox" runat="server" CssClass="datetime-picker"></asp:TextBox>

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="jquery-ui-timepicker-addon.css">

<script>
$(function() {
    $('.datetime-picker').datetimepicker({
        dateFormat: 'yy-mm-dd',
        timeFormat: 'HH:mm:ss',
        showButtonPanel: true
    });
});
</script>

时间扩展插件可从官方开源仓库免费获取。

3. Bootstrap DateTimePicker #

若项目已使用Bootstrap框架，可选用这套免费控件：

<asp:TextBox ID="DateTimeTextBox" runat="server" CssClass="form-control datetime-picker"></asp:TextBox>

<script src="jquery.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="bootstrap-datepicker.min.css">

<script>
$(function() {
    $('.datetime-picker').datepicker({
        format: 'yyyy-mm-dd HH:mm:ss',
        autoclose: true,
        todayHighlight: true
    });
});
</script>

部分版本需额外引入时间扩展组件，可从Bootstrap生态的开源资源中获取。

二、datetime-local 格式转换为SQL Server兼容格式 #

datetime-local 返回的2023-11-02T17:00是ISO 8601标准格式，可通过以下两种方式处理：

1. 服务器端解析为DateTime对象（推荐） #

直接将输入字符串解析为.NET DateTime类型，通过参数化查询插入数据库，避免SQL注入且无需手动格式化：

string inputValue = DateTimeTextBox.Text;
if (DateTime.TryParse(inputValue, out DateTime sqlCompatibleDate))
{
    string insertSql = "INSERT INTO YourTable (DateTimeColumn) VALUES (@DateValue)";
    using (SqlConnection conn = new SqlConnection(YourConnectionString))
    {
        conn.Open();
        using (SqlCommand cmd = new SqlCommand(insertSql, conn))
        {
            cmd.Parameters.AddWithValue("@DateValue", sqlCompatibleDate);
            cmd.ExecuteNonQuery();
        }
    }
}

.NET的DateTime.TryParse方法可自动识别ISO 8601格式，无需额外处理。

2. 转换为SQL兼容的字符串格式 #

若需手动转换为yyyy-MM-dd HH:mm:ss格式（SQL Server直接支持），可在解析后格式化：

string formattedDate = sqlCompatibleDate.ToString("yyyy-MM-dd HH:mm:ss");
// 同样建议通过参数化查询使用该字符串，而非直接拼接SQL语句

3. 前端预处理（可选） #

若需在提交前修改输入格式，可使用JavaScript处理：

const dateInput = document.getElementById('<%= DateTimeTextBox.ClientID %>');
dateInput.addEventListener('change', function() {
    const date = new Date(this.value);
    const formatted = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}:00`;
    this.value = formatted;
});

注：前端处理仅作辅助，服务器端验证和解析仍是必要步骤。

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