iT邦幫忙

2024 iThome 鐵人賽

DAY 0
0
自我挑戰組

ASP.NET Core生成網站記錄系列 第 22

DAY22-日期選擇器

  • 分享至 

  • xImage
  •  

@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 加载完成后執行。
區域設定: 如果需要調整日期格式、語言等設定,可以參考日期選擇器插件的官方文檔。
其他功能: 大部分的日期選擇器插件都提供了豐富的功能,例如日期範圍選擇、最小日期/最大日期限制等,您可以根據需要進行配置。


上一篇
DAY21-SQL(待修)
下一篇
DAY23- LOGGER
系列文
ASP.NET Core生成網站記錄31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言