文章目錄
ASP.NET MVC 5 前後端日期欄位輸入一致性，如何相容Google Chrome和Mac Safari?
原始 Model
|
1 2 3 4 5 6 7 |
[Required] [Display(Name = "Birthday")] [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)] public Nullable birthday; |
後端js
|
1 2 3 4 |
$('#birthday').datepicker({ dateFormat: 'yy-mm-d', // 其他設定... }); |
在Google Chrome會自動轉換，都非常正常，但到了Mac Safari就完蛋了。
調整模型格式？
後端與前端的一致性：若你希望後端（ASP.NET MVC模型）與前端（jQuery UI datepicker）之間在日期格式上保持一致性，你可能需要確認兩處使用的格式是否匹配。如果前端期望的格式是yy-mm-d，而後端模型則是yyyy/MM/dd，這可能不會導致功能上的錯誤，但在某些情況下可能會對使用者體驗產生輕微影響，特別是在日期的顯示和編輯方面。
格式轉換：大多數情況下，前後端的日期格式差異可以通過JavaScript進行轉換來處理，或者在模型綁定時透過自定義模型綁定器來實現。因此，除非有特定的需求要求前後端格式完全一致，否則不必強制調整模型的日期格式。
考慮使用標準格式：如果希望簡化前後端的交互並減少可能的格式轉換錯誤，可以考慮在前後端使用國際標準的日期格式，如ISO 8601格式（yyyy-MM-dd）。這需要在前端的datepicker設置中調整dateFormat，並相應地調整模型中的DataFormatString。
總結，如果需要前後端格式一致，建議選擇通用格式進行統一。
ISO 8601格式
若決定在整個應用中都採用國際標準的日期格式（例如ISO 8601格式：yyyy-MM-dd），前後端都需要做出相應的調整以確保一致性和無縫的數據交互。以下是調整的步驟和考慮事項：
後端（ASP.NET MVC 5）的調整
在ASP.NET MVC 5模型中，你需要確保日期格式設定為ISO 8601標準。調整你的模型屬性如下：
|
1 2 3 4 5 |
[Required] [Display(Name = "Birthday")] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] public Nullable Birthday { get; set; } |
這裡DataFormatString被設定為”{0:yyyy-MM-dd}”，以符合ISO 8601標準。
前端（jQuery UI Datepicker）的調整
對於前端，如果你使用jQuery UI的datepicker來讓使用者選擇日期，則需要將datepicker的dateFormat設定為相匹配的格式：
|
1 2 3 4 5 |
$('#birthday').datepicker({ dateFormat: 'yy-mm-dd', // 調整為符合ISO 8601格式 // 其他設定... }); |
注意，jQuery UI datepicker的dateFormat選項使用yy表示四位年份，而非yyyy，這是它的特殊語法。
確保前後端交互的數據格式一致
當使用AJAX或其他方式將日期數據從前端發送到後端時，確保以yyyy-MM-dd的格式發送日期字符串。
在將日期顯示在前端時（例如，從後端獲取數據填充到表單或數據展示中），也應保持此格式。
進一步考慮
測試：在進行上述調整後，徹底測試你的應用以確保日期的顯示、選擇和提交在所有預期場景中都能正常工作。
用戶體驗：考慮到不同地區的用戶可能習慣於不同的日期格式，確保選擇的格式對目標用戶群體來說是友好的。如果應用面向國際用戶，則使用ISO 8601標準格式通常是安全的選擇。
通過在前後端統一使用標準日期格式，你可以減少格式不一致可能導致的錯誤，並提高應用的可維護性和擴展性。
