具有默认日期的 MVC4 日期选择器答案

【问题标题】：MVC4 Date Picker with Default Date具有默认日期的 MVC4 日期选择器
【发布时间】：2014-02-19 01:25:45
【问题描述】：

我正在使用带有 Razor 视图引擎的 MVC4。我的控制器如下：

public ActionResult Index()
{

    return View(new EmployeeIndexViewModel
    {

        ToDate = DateTime.Now

    });

}

我的视图模型如下：

public class EmployeeIndexViewModel
{
    [DataType(DataType.Date)]
    public DateTime ToDate { get; set; }
}

在我看来，我有一个简单的EditorFor() 电话：

@Html.EditorFor(model => model.ToDate)

但仍然在我的日期选择器中获得默认（屏蔽）值：

问题：

我怎样才能让今天的日期（从控制器）显示在这里？

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 razor datepicker

【解决方案1】：

我的问题不是我最初认为的 jQuery 或 MVC4 问题。它与 HTML5 兼容浏览器如何显示日期选择器有关。我以不正确的格式将日期传递给视图。

我将我的 ViewModel 修改为此，现在可以正确填充日期：

public class EmployeeIndexViewModel
{
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime ToDate { get; set; }
}

【讨论】：

我要指出的一点是，DataFormatString 格式与实际显示的格式不同。如果您要使用 MM/dd/yyyy 的 DataFormatString，那么它将无法正常工作。无论您的日期实际格式如何，您似乎都必须使用 yyyy-MM-dd。
你在属性中传递了yyyy-MM-dd，但我在你的照片中看到了MM/dd/yyyy。怎么了？我之所以问，是因为我想在我的视图中更改该顺序，但我遇到了与您的图片中相同的问题。

【解决方案2】：

您应该从 jQuery 级别执行此操作：

   $( ".selector" ).datepicker( "setDate", yourDate);

例如，如果你想设置今天的日期：

   $( ".selector" ).datepicker( "setDate", new Date());

您还可以尝试在视图模型类中添加DisplayFormat 属性，以确保日期选择器能够正确解释您的数据格式：

public class EmployeeIndexViewModel
{
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime ToDate { get; set; }
}

【讨论】：

您将如何在 .cshtml 文件中反映此更改？你会删除.EditorFor() 调用并静态插入一个文本框吗？
首先尝试添加我建议的属性，这似乎是最简单的解决方案
我做到了，日期选择器仍然像我的问题中的屏幕截图一样显示。
将您的编辑器更改为：@Html.EditorFor(model => model.ToDate, new { id = "toDate"});然后 $( "#toDate" ).datepicker( "setDate", new Date());
问题不在于jQuery，而是.EditorFor() 调用将type='date' 属性添加到HTML 属性。

【解决方案3】：

你可以使用 JQuery 设置 Input 或 Input with type="date" (datetimepicker)。

在 Razor 视图中

@Html.TextBoxFor(m => m.StartedDate, new { @id = "mydate", @type = "date", @class= "form-control" })

这里是JS代码

   $(document).ready(function () {
        var dateNewFormat, onlyDate, today = new Date();

        dateNewFormat = today.getFullYear() + '-';
        if (today.getMonth().length == 2) {

            dateNewFormat += (today.getMonth() + 1);
        }
        else {
            dateNewFormat += '0' + (today.getMonth() + 1);
        }

        onlyDate = today.getDate();
        if (onlyDate.toString().length == 2) {

            dateNewFormat += "-" + onlyDate;
        }
        else {
            dateNewFormat += '-0' + onlyDate;
        }

        $('#mydate').val(dateNewFormat);
    });

【讨论】：