DateTime动态字段无法正常工作

时间:2015-04-14 14:04:02

标签: asp.net-mvc datetime razor

我现在已经坚持了一个小时。

我有一个动态表格。这在添加新项目时工作正常,

然后我尝试提交Edit for Edit我得到DateTime的客户端验证:

enter image description here

这是HTML:

using (Html.BeginCollectionItem("ValidDates"))
{
    <div class="row mt-10">
        @Html.HiddenFor(m => m.Id)
        @Html.HiddenFor(m => m.IsDeleted, new { data_is_deleted = "false" })
        <div class="col-md-5">
            @Html.TextBoxFor(m => m.ValidFrom, new { @Value = Model.ValidFrom.ToString("dd/MM/yyyy"), @class = "form-control dateTimePicker" })
            @Html.ValidationMessageFor(m => m.ValidFrom)
        </div>
        <div class="col-md-5">
            @Html.TextBoxFor(m => m.ValidTo, new { @Value = Model.ValidFrom.ToString("dd/MM/yyyy"), @class = "form-control dateTimePicker" })
            @Html.ValidationMessageFor(m => m.ValidTo)
        </div>
        <div class="col-md-1">
            @Html.CheckBoxFor(m => m.Enabled)
        </div>
        <div class="col-md-1">
            <span class="glyphicon glyphicon-trash" data-action="removeItem" title="remove" style="cursor:pointer"></span>
        </div>
    </div>
}

这是模特:

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

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

    public bool Enabled { get; set; }

    public virtual Bucket Bucket { get; set; }

    [NotMapped]
    public bool IsDeleted { get; set; }
}

我甚至尝试过使用EditorFor(当我发布Back但DateFormat不正确时,这个工作正常)。

using (Html.BeginCollectionItem("ValidDates"))
{
    <div class="row mt-10">
        @Html.HiddenFor(m => m.Id)
        @Html.HiddenFor(m => m.IsDeleted, new { data_is_deleted = "false" })
        <div class="col-md-5">
            @Html.EditorFor(m => m.ValidFrom, new {  @class = "form-control" })
            @Html.ValidationMessageFor(m => m.ValidFrom)
        </div>
        <div class="col-md-5">
            @Html.EditorFor(m => m.ValidTo, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.ValidTo)
        </div>
        <div class="col-md-1">
            @Html.CheckBoxFor(m => m.Enabled)
        </div>
        <div class="col-md-1">
            <span class="glyphicon glyphicon-trash" data-action="removeItem" title="remove" style="cursor:pointer"></span>
        </div>
    </div>
}

我尝试将模型中的格式更改为{0:dd / MM / yyyy}

我需要格式为:day/Month/Year 但正如您在下面的图片中看到的那样,格式为Year/Month/day

enter image description here

此项目的DatePicker为:http://eonasdan.github.io/bootstrap-datetimepicker/

这个datePicker是否与此有关?

1 个答案:

答案 0 :(得分:0)

我找到了一个似乎现在正在运作的解决方案:

 public class BucketValidDates : BaseEntity
    {
        public DateTime ValidFrom { get; set; }

        public DateTime ValidTo { get; set; }

        public bool Enabled { get; set; }

        public virtual Bucket Bucket { get; set; }

        [NotMapped]
        public bool IsDeleted { get; set; }
    }

HTML:

using (Html.BeginCollectionItem("ValidDates"))
{
    <div class="row mt-10">
        @Html.HiddenFor(m => m.Id)
        @Html.HiddenFor(m => m.IsDeleted, new { data_is_deleted = "false" })
        <div class="col-md-5">
            @Html.TextBoxFor(m => m.ValidFrom, new { @class = "form-control dateTimePicker", type = "text", data_val = "false" })
            @Html.ValidationMessageFor(m => m.ValidFrom)
        </div>
        <div class="col-md-5">
            @Html.TextBoxFor(m => m.ValidTo, new { @class = "form-control dateTimePicker", type = "text", data_val = "false" })
            @Html.ValidationMessageFor(m => m.ValidTo)
        </div>
        <div class="col-md-1">
            @Html.CheckBoxFor(m => m.Enabled)
        </div>
        <div class="col-md-1">
            <span class="glyphicon glyphicon-trash" data-action="removeItem" title="remove" style="cursor:pointer"></span>
        </div>
    </div>
}

jQuery激活dateTimePicker:

<script type="text/javascript">

    $(function () {
        $('.dateTimePicker').datetimepicker({
            format: 'DD/MM/YYYY'
        });
    });

</script>