CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Traffy
Traffy

Reputation: 2861

MVC date format and datepicker

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."

Upvotes: 3

Views: 25310

Answers (4)

Miguel Angel
Miguel Angel

Reputation: 1

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

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

Upvotes: -1

Ravi Mehta
Ravi Mehta

Reputation: 448

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

Upvotes: 0

Michael F&#252;rstenberg
Michael F&#252;rstenberg

Reputation: 766

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

Upvotes: 3

Felipe Oriani
Felipe Oriani

Reputation: 38638

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.

Upvotes: 1

Related Questions