@Html.EditorFor 的默認行為: 對於日期類型,@Html.EditorFor 預設會產生一個普通的文字輸入框,使用者需要手動輸入日期。
缺少 JavaScript 插件: 程式碼中並沒有引入任何 JavaScript 的日期選擇器插件(如 jQuery UI Datepicker、Bootstrap Datepicker 等)。這些插件提供了視覺化的日期選擇介面,方便使用者選擇日期。
如何添加日期選擇器功能?
引入日期選擇器插件:
選擇一個適合您的日期選擇器插件,例如 jQuery UI Datepicker 或 Bootstrap Datepicker。
將插件的 JavaScript 和 CSS 檔案引入到您的專案中。
修改 View 程式碼:
將 @Html.EditorFor 改為 @Html.TextBoxFor,並在 htmlAttributes 中添加 class="datepicker"。這會讓日期輸入框擁有日期選擇器的樣式和行為。
根據所選的日期選擇器插件,可能需要額外設定一些選項。
示例(使用 Bootstrap Datepicker):
HTML
@Html.TextBoxFor(model => model.Birthday, new { htmlAttributes = new { @class = "form-control datepicker" } })
請謹慎使用程式碼。
完整示例(包含 JavaScript 初始化):
HTML
@section Scripts {
@Scripts.Render("~/bundles/jqueryui")
$(document).ready(function () {
$(".datepicker").datepicker();
});
}
請謹慎使用程式碼。
注意事項
CSS: 確保引入日期選擇器插件的 CSS 檔案,以確保樣式正確。
JavaScript: 將 JavaScript 初始化程式碼放在 @section Scripts 區段,以便在 DOM 加载完成后執行。
區域設定: 如果需要調整日期格式、語言等設定,可以參考日期選擇器插件的官方文檔。
其他功能: 大部分的日期選擇器插件都提供了豐富的功能,例如日期範圍選擇、最小日期/最大日期限制等,您可以根據需要進行配置。