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

Posted 2023-05-07

【中文标题】具有默认日期的 MVC4 日期选择器

【英文标题】：MVC4 Date Picker with Default Date

【发布时间】：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)

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

问题：

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

【参考方案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);
    );