MVC 後端預設值傳前端問題

#c# #mvc #asp.net mvc #asp.net #asp.net core mvc

sea9075 2024-06-18 00:24:43 ‧ 643 瀏覽

分享至

小弟在使用 MVC 建立簡單的 TodoList 專案
目前卡在 StartTime 和 CreateTime 要傳預設值 DateTime.Now 的值到前端顯示遇到無法 24 小時制顯示問題
以下附上程式碼，如果還有需要麻煩再跟我說，謝謝大家

// Models
namespace TodoListDemo.Models
{
    public class TodoList
    {
        [Required]
        [DisplayName("開始時間")]
        [DataType(DataType.DateTime)]
        [DisplayFormat(ApplyFormatInEditMode = true)]
        public DateTime StartTime { get; set; }
        [DisplayName("結束時間")]
        [DataType(DataType.DateTime)]
        [DisplayFormat(ApplyFormatInEditMode = true)]
        public DateTime? EndTime { get; set; }
        [Required]
        [DisplayName("建立時間")]
        [DataType(DataType.DateTime)]
        [DisplayFormat(ApplyFormatInEditMode = true)]
        public DateTime CreateTime { get; set; }
    }
}

// Controller
public IActionResult Create()
{
    var showTime = new TodoList
    {
        StartTime = DateTime.Now,
        CreateTime = DateTime.Now
    };
    return View(showTime);
}
[HttpPost]
public IActionResult Create(TodoList obj)
{
    if (ModelState.IsValid)
    {
        _db.todoLists.Add(obj);
        _db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(obj);
}

<div class="mb-3 row p-1">
    <label asp-for="StartTime" class="p-0"></label>
    <input asp-for="StartTime" class="form-control" value="@Model.StartTime.ToString("yyyy-MM-dd HH:mm:ss")" />
</div>
<div class="mb-3 row p-1">
    <label asp-for="EndTime" class="p-0"></label>
    <input asp-for="EndTime" class="form-control" type="datetime-local"/>
</div>
<div class="mb-3 row p-1">
    <label asp-for="CreateTime" class="p-0"></label>
    <input asp-for="CreateTime" class="form-control" readonly value="@Model.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")" />
</div>

如果依照以上程式碼會產生以下畫面

小弟因為剛學 MVC，關於 24 小時制不管改什麼都還是 12 小時制
如果小弟有多餘的程式碼也希望大大們可以告知
謝謝大家

froce iT邦大師 1 級 ‧ 2024-06-18 08:41:30 檢舉

直接傳時間戳，然後用JS去顯示。
用MVC就不可避免去學點JS。

jack8900 iT邦新手 1 級 ‧ 2024-06-18 10:17:26 檢舉

換一個前端的日期選擇器，預設的記得會因為作業系統不同語系有不同的小時制

念戀 iT邦新手 4 級 ‧ 2024-06-21 10:38:37 檢舉

給他一個datetimepicker 設定時間不能用 type="datetime-local" 了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

念戀

iT邦新手 4 級 ‧ 2024-06-21 11:24:17

參考：https://harry0071.github.io/2018/02/08/jquerydatetimepicker/

@{
    ViewData["Title"] = "Home Page";
}
@model TodoList
@* _Layout *@
<link href="https://cdn.bootcss.com/jquery-datetimepicker/2.5.17/jquery.datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-datetimepicker/2.5.17/jquery.datetimepicker.full.min.js"></script>
@* _Layout *@

<div class="mb-3 row p-1">
    <label asp-for="StartTime" class="p-0"></label>
    <input asp-for="StartTime" class="form-control datetimepicker" value="@Model.StartTime.ToString("yyyy-MM-dd HH:mm:ss")" />
</div>
<div class="mb-3 row p-1">
    <label asp-for="EndTime" class="p-0"></label>
    <input id="EndTime" name="EndTime" class="form-control datetimepicker" /> @* asp-for="EndTime" 會套用 Datetime 屬性 所以移除 *@
</div>
<div class="mb-3 row p-1">
    <label asp-for="CreateTime" class="p-0"></label>
    <input asp-for="CreateTime" class="form-control datetimepicker" readonly value="@Model.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")" />
</div>

<script>
$(function() {
    $.datetimepicker.setLocale('zh');
    $('.datetimepicker').datetimepicker({
            format: 'Y/m/d H:i'
    });
});
</script>