将日期时间模型值绑定到日期选择器并将它们传递给控制器方法答案

【问题标题】：Bind Datetime Model value to datepicker and pass them to controller method将日期时间模型值绑定到日期选择器并将它们传递给控制器方法
【发布时间】：2013-11-21 16:20:13
【问题描述】：

我正在构建一个 MVC4 应用程序，在我的模型中我有这些字段：

[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime mDateCreated { get; set; }

[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime? mDateModified { get; set; }

[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime? mDateLastDisplayed { get; set; }

[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime mStartDate { get; set; }

[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime? mEndDate { get; set; }

我正在尝试在视图中设置日期选择器。这是我到目前为止所做的：

<div class="float-left">
    <p>Date Created:</p>
    <p>Date of last modification:</p>
    <p>Date Last Displayed:</p>
    <p>Date of promotion's start:</p>
    <p>Date of promotion's end:</p>
</div>
<div class="float-right">
    <p>
        @Html.TextBoxFor(_item => _item.mCardOfTheDay.mDateCreated, new
            {
                @value = Model.mCardOfTheDay.mDateCreated,
                @selectedDate = Model.mCardOfTheDay.mDateCreated,
                @class = "datePick",
                @type = "date",
                @id = "dateCreated"
            })
    </p>
    <p>
        @(Model.mCardOfTheDay.mDateModified != null ? Html.DisplayFor(_item => _item.mCardOfTheDay.mDateModified) : Html.Label(ValueDomain.FIELD_UNAVAILABLE))
    </p>
    <p>@(Model.mCardOfTheDay.mDateLastDisplayed != null ? Html.DisplayFor(_item => _item.mCardOfTheDay.mDateLastDisplayed) : Html.Label(ValueDomain.FIELD_UNAVAILABLE))</p>
    <p>
        @*@Html.EditorFor(_item => _item.mCardOfTheDay.mStartDate, new { @class = "datePick", @type="date" })*@
        @*@Html.TextBoxFor(_item => _item.mCardOfTheDay.mStartDate, new {@id = "dateStart"})*@
      @*  @Html.TextBoxFor(_item => _item.mCardOfTheDay.mStartDate, new
            {
                @value = (DateTime?) Model.mCardOfTheDay.mStartDate,
                @selectedDate = (DateTime?) Model.mCardOfTheDay.mStartDate,
                @class = "datePick",
                @type = "date",
                @id = "dateStart"
            })*@
    </p>
    <p>
        @Html.TextBoxFor(_item => _item.mCardOfTheDay.mEndDate, new
            {
                @value = Model.mCardOfTheDay.mEndDate,
                @selectedDate = Model.mCardOfTheDay.mEndDate,
                @class = "datePick",
                @type = "date",
                @id = "dateEnd"
            })
    </p>
</div>
<div class="clear"></div>

还有 CSS 来展示我对这些类所做的事情：

$('.datePick').datepicker({
    dateFormat: "dd/ww/yy",
});

$('.datePick').each(function () {
    var a = $(this).datepicker({
        dateFormat: "dd/ww/yy",
        defaultDate: new Date($(this).val())
    });
});

这显示了我遇到的各种问题。第一：

将Html.TexborFor 助手与@value、@selectedDate 等一起使用会显示一个日期选择器，但此日期选择器的默认显示值是aaaa-mm-dd，而不是绑定到模型和当我将模型传递给控制器时，没有保留任何数据（意味着 mEndDate 始终为空）；
仅尝试设置日期选择器会得到相同的结果；
这是一个 Html 代码示例，向您展示我的“结果”：<input class="input-validation-error datePick" data-val="true" data-val-date="The field mDateCreated must be a date." data-val-required="The mDateCreated field is required." id="dateCreated" name="mCardOfTheDay.mDateCreated" selectedDate="11/21/2013 00:00:00" type="date" value="" />
如果我使用 EditorFor，我只有一个字符串格式的日期，没有日期选择器。

我想要的是一个日期选择器，其中选择了正确的日期，将所选日期传递给 post 中的控制器方法。谁能帮我弄清楚为什么这不起作用？

【问题讨论】：

标签： html jquery-ui asp.net-mvc-4 date datepicker

【解决方案1】：

您不应该使用不同格式的相同日期覆盖日期输入的值，没有理由这样做只会让人头疼。根据我的经验，您最好保持原样。

@Html.TextBoxFor(_item => _item.mCardOfTheDay.mDateCreated, new
{
    @selectedDate = Model.mCardOfTheDay.mDateCreated,
    @class = "datePick",
    @type = "date",
    @id = "dateCreated"
})

但是，您需要做的是正确配置日期选择器，以便它知道如何解释来自数据库的日期。如果您想向用户显示不同于回发到服务器的格式，您可以使用altField (source) 和altFormat (source) 选项。

这将允许您使用 dateFormat 在用户输入中以您喜欢的任何格式显示日期，同时将发布的值保持为正确的格式。

你不再需要这个了：

$('.datePick').each(function () {
    var a = $(this).datepicker({
        dateFormat: "dd/ww/yy",
        defaultDate: new Date($(this).val())
    });
});

您还需要删除模型属性中的ApplyFormatInEditMode = true。让框架根据当前文化处理日期，不要试图通过到处应用格式来对抗它。

只需将文本框的值保留为您的数据库发送的任何内容，然后使用数据选择器的功能在客户端执行您需要的操作。

我唯一建议覆盖该值的情况是，如果您担心输入会显示时间部分，而您只需要日期。在这种情况下，你应该这样做：

@Html.TextBoxFor(_item => _item.mCardOfTheDay.mDateCreated, new
{
    @selectedDate = Model.mCardOfTheDay.mDateCreated,
    @class = "datePick",
    @type = "date",
    @id = "dateCreated",
    @Value = Model.mCardOfTheDay.mDateCreated.ToString("mm/d/yyyy")
})

注意@Value 带有大写的 v，这实际上很重要，而不是拼写错误。然后，您将日期格式传递给 ToString 方法，但它必须与您的数据库格式相同。

编辑：

我继续构建了一个小型测试用例来尝试复制您的问题。这是我所拥有的：

控制器：

public ActionResult Test()
{
    return View(new TestViewModel()
    {
        DateCreated = DateTime.Now.AddDays(10)
    });
}

[HttpPost]
public ActionResult Test(TestViewModel model)
{
    return RedirectToAction("Test");
}

视图模型：

public class TestViewModel
{
    public DateTime DateCreated { get; set; }
}

查看：

@using (Html.BeginForm())
{
    @Html.TextBoxFor(m => m.DateCreated, new {
        @type = "date",
        @Value = Model.DateCreated.ToString("d")
    })
    <input type="submit">
}

// This is the rendered input
<input Value="12/1/2013" data-val="true" data-val-date="The field DateCreated must be a date." id="DateCreated" name="DateCreated" type="date" value="12/1/2013 4:03:19 PM" />

JS：

$('input[type="date"]').datepicker();

这一切都按预期工作； datepicker 默认选择输入值中的日期，model.DateCreated 的值在帖子中设置为DateTime 对象。请注意，除了在显示值中我用标准短日期模式替换了完整日期之外，我没有在任何地方弄乱格式。

您能否尝试简化您的代码以匹配我所拥有的并告诉我会发生什么？

【讨论】：

有趣，真的，我对它了解得更多了。令我沮丧的是，我尝试了您的建议，但无济于事。 :|
@HerveS 您的数据库中的“原始”日期是什么样的？您的应用程序使用什么文化？
文化：en-US，我想是英语。原始日期是 DateTime 值。
@HerveS 查看我的编辑，让我知道这是否有效。我知道它不完整，因为它不完全是您所拥有的，但请先尝试让它工作，我们稍后会担心显示格式。
嗯，一切都是相似的，即使是输出，也是绑定效果不知何故。

【解决方案2】：

嗯，这么多年过去了，你肯定已经解决了这个问题，但仍然想为所有刚接触这个问题的人回答：

日期选择器应采用格式 YYYY-MM-DD 作为其值。个位数的日期和月份应该用 0 填充。一月是 01。您可以简单地将日期格式修改为

 @Value = Model.DateCreated.ToString("yyyy-MM-dd")

【讨论】：