DateTime dynamic field not working properly

Question

I have been stuck on this for an hour now.

I have a dynamic form. Which works fine when Adding New Items,

But then I try to submit the Form for Edit I get client side validation for DateTime:

enter image description here

This is the 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>
}

And this is the Model:

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; }
}

I have even tried using EditorFor (This works when I post Back but the DateFormat is not correct).

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>
}

I tried changing the format in Model to {0:dd/MM/yyyy}

I need the format to be: day/Month/Year But as you can see in Image below that the Format is Year/Month/day

enter image description here

The DatePicker for this Project is: http://eonasdan.github.io/bootstrap-datetimepicker/

Does this datePicker have something to do with this?

You certainly should have the DisplayFormat set to dd-MM-yyyy (unless there is a different reason why it is set that way.) — Nathan Koop, Apr 14 '15 at 14:15
@NathanKoop I have tried setting it to dd-MM-yyyy but i still get the same format in the View — Dawood Awan, Apr 14 '15 at 14:18
Check this post http://stackoverflow.com/questions/18546971/mvc-4-how-to-validate-a-non-us-date-with-client-validation — ssimeonov, Apr 14 '15 at 14:33

score 0 · Answer 1 · answered Apr 14 '15 at 14:39

I found a solution which seems to be working now:

 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 to activate dateTimePicker:

<script type="text/javascript">

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

</script>

This won't work in all of the cases. If the client culture is using different Date format the jQuery validation will return error again. In your case it works because the culture on your PC is using the same Date format. — ssimeonov, Apr 14 '15 at 14:44

DateTime dynamic field not working properly

1 Answers1