MVC date format and datepicker

Question

I just implemented the datepicker provided by jQuery UI in order to use the calendar to choose the a date. Unfortunately, when I choose the date and want click on the create button, the application doesn't want to save my entries because the date format is invalid. I tried to add the globalization parameter in the webconfig but it seems that this way doesn't work.

The jQuery part :

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
<script type="text/javascript">
    $(document).ready(function () {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,

        });
    });
</script>

}

My create View :

    @using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Person</legend>
        <div class="editor-label">
            First name :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 })
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>
        <div class="editor-label">
            Last name :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.LastName, new { maxlength = 50 })
            @Html.ValidationMessageFor(model => model.LastName)
        </div>
        <div class="editor-label">
            National number :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.NumNat, new { maxlength = 11 })
            @Html.ValidationMessageFor(model => model.NumNat)
        </div>
        <div class="editor-label">
            Start date :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker" })
            @Html.ValidationMessageFor(model => model.StartDate)
        </div>
        <div class="editor-label">
            End date :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker"})
            @Html.ValidationMessageFor(model => model.EndDate)
        </div>
        <div class="editor-label">
            Distance House - Work (km) :
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.HouseToWorkKilometers)
            @Html.ValidationMessageFor(model => model.HouseToWorkKilometers)
        </div>
        <div class="editor-label">
            Category :
        </div>
        <div class="editor-field">
            @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
            @Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) <a href="../ProductPackageCategory/Create">
                Add a new category?</a>
        </div>
        <div class="editor-label">
            Upgrade? :
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Upgrade)
            @Html.ValidationMessageFor(model => model.Upgrade)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Any idea to resolve this problem?

EDIT : When I modify and put my date format as a "dd/mm/yy" format, an validation error appears saying "The field StartDate must be a date." and if I change the format as a "mm/dd/yy" format, an ohter validation error appears saying "The field StartDate must be a date."

I have the same problem. Did you find a solution?

StefanG
– StefanG

2016-01-16 15:31:28 +00:00
Commented Jan 16, 2016 at 15:31 — StefanG
– StefanG, Commented Jan 16, 2016 at 15:31

Michael Fürstenberg · Accepted Answer · 2013-03-14 15:48:22Z

3

You could perhaps change the format for your model to something like:

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

Edit:

Or update the code from the other answer to this:

    $(".datepicker").datepicker({ 
   changeMonth: true,
   changeYear: true,
   dateFormat: 'dd-mm-yy' 
});

edited Mar 14, 2013 at 15:48

answered Mar 14, 2013 at 15:34

Michael Fürstenberg

7663 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Traffy Over a year ago

Thanks for your answer. I tried this before, now again, but my date (for example : 30/03/2013) is not accepted as a date.

Traffy Over a year ago

I tried but unfortunately it didn't work. When I put "dateFormat : 'dd-mm-yy', it says " The field StartDate must be a date." and when I put as "dateFormat : mm-dd-yy", it says that my date is not accepted as a date... What should I do?

Felipe Oriani · Accepted Answer · 2013-03-14 15:19:24Z

1

You could specify the format of your date, try something like this, for sample using the dd/MM/yyyy format:

$(".datepicker").datepicker({ 
   changeMonth: true,
   changeYear: true,
   dateFormat: 'dd/MM/yyyy' 
});

And when you select a date, the value on the textbox will apper in this format and submit it on your post.

answered Mar 14, 2013 at 15:19

Felipe Oriani

38.7k20 gold badges141 silver badges203 bronze badges

2 Comments

Traffy Over a year ago

Thanks for your help ! I checked this link (docs.jquery.com/UI/Datepicker/formatDate) to choose my format and I found it... but it seems that my application doesn't accept the "dd/mm/yy" format, by saying "The field StartDate must be a date."

Felipe Oriani Over a year ago

Could you post a part of your output code? Problably it is the jQuery Unobtrusive Validation.

Ravi Mehta · Accepted Answer · 2016-02-02 11:52:00Z

0

May this can help you ,You can change the current culture in your Global.asax file, for application level For Example,

using System.Globalization;
using System.Threading;

protected void Application_BeginRequest(Object sender, EventArgs e)
{    
  CultureInfo newCulture = (CultureInfo) System.Threading.Thread.CurrentThread.CurrentCulture.Clone();
  newCulture.DateTimeFormat.ShortDatePattern = "dd-MMM-yyyy";
  newCulture.DateTimeFormat.DateSeparator = "-";
  Thread.CurrentThread.CurrentCulture = newCulture;
}

answered Feb 2, 2016 at 11:52

Ravi Mehta

4481 gold badge8 silver badges21 bronze badges

Comments

Miguel Angel · Accepted Answer · 2016-06-13 18:52:58Z

-1

Did you have any plugin like jquery.validator.js ? If you... try this:

 $("#myform").validate({
   ignore: "#DateInput"
})

answered Jun 13, 2016 at 18:52

Miguel Angel

1

1 Comment

DVK Over a year ago

Disabling validation to resolve an error seems like a bad idea. It might be better to address the error.

Collectives™ on Stack Overflow

MVC date format and datepicker

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related