2

I'm a beginner of asp.net jquery and html5 and I'm developing an asp.net mvc 4 site where I have a form with two Date fields. I don't want to insert a date manually, so I tried to use this solution to implement a simple datepicker:

     <fieldset>
    <legend>RangeDateViewModel</legend>
    <div class="editor-label">
        Start Date
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.StartDate,  new{ @class = "date" })
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>

    <div class="editor-label">
        End Date
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.EndDate,  new{ @class = "date" })
        @Html.ValidationMessageFor(model => model.EndDate)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>


   }

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".date").datepicker();
    });
</script>
}

the code works good, but if I select a date from 13th until 30/31 th of the month i have always the same warning: "The field StartDate must be a date." and "The field EndDate must be a date."

EDIT: I add my ViewModel as asked:

public class RangeDateViewModel
{
    public DateTime StartDate { get; set; }

    public DateTime EndDate { get; set; }

}
antedesk
  • 756
  • 6
  • 15
  • 30
  • There is differences in deserialization depending on HTTP method. If you are using GET a binder will use _invariant culture_ to bind arguments, and if you are using POST a binder will use _current culture_ – hazzik Apr 18 '13 at 17:02
  • i didn't see your comment @hazzik, sorry. I use a POST. Ok and what do i do to solve this problem? :) – antedesk Apr 18 '13 at 19:08
  • you need to set date format which will reflect your current culture on ASP.NET application, like described in answers. – hazzik Apr 19 '13 at 00:41

2 Answers2

7

You need to tell the DatePicker that you aren't using a month first date format:

$.datepicker.setDefaults({
    dateFormat: "dd/mm/yy"
});

However, that is probably not a big part of your problem (and depending upon your browser culture, it is likely that the date picker was already using a day first date format).

There are also issues with day first date formats and the jQuery validation, as well as the MVC binding. This is one of the main reasons I stick with a year first date format (yyyy-mm-dd), since it is parsed correctly by all the various libraries.

Community
  • 1
  • 1
Jason Berkan
  • 8,734
  • 7
  • 29
  • 39
  • ehm sorry for the following silly question (i'm a newbi) but how do i change my code? because i try to use your code and i didn't use the datepicker; I tried to wrote $(".date").datepicker(); $.datepicker.setDefaults({ dateFormat: "dd/mm/yyyy" }); and it didn't work (always the same alert). Sorry – antedesk Apr 18 '13 at 16:48
  • 1
    datepicker uses 'y' for 2-digit years and 'yy' for 4-digits. – hazzik Apr 18 '13 at 16:59
  • @antedesk - What does your model look like? Can you add that in to your question? – Jason Berkan Apr 18 '13 at 17:05
  • @JasonBerkan I add the view model to my question. thanks for your time – antedesk Apr 18 '13 at 18:06
1

JQuery is an option but you could take a .NET approach. I assume StartDate and EndDate are coming from a ViewModel and are of DateTime type ?

Simply use@Html.EditorFor intead of @Html.TextBoxFor and right away your controls will be turned into DatePickers.

You can also set specific rules on how your Dates will display and behave by specifying data annotation attributes on your ViewModel DateTime. For example this could be your StartDate Viewmodel property:

[DisplayFormat(NullDisplayText = "", DataFormatString = "{0:d}")]
[Display(Name = "Start Date")]
public DateTime? StartDate{ get; set; }

Not sure how to format your datepicker with C# further ? No problem, continue with JQuery:

$(':input[data-datepicker]').datepicker({ dateFormat: 'dd/mm/yy' });
InspiredBy
  • 4,271
  • 6
  • 40
  • 67
  • This does not answer his question, but I completely agree and love the Editor/Display templates in MVC. Antedesk, you may want to check them out to save you some time :D – Tony Apr 18 '13 at 17:12
  • On the second thought I did address it. I provided a couple of different ways to format DateTime properly. Possibly you made the commend before some of my edits :) – InspiredBy Apr 18 '13 at 17:18
  • In your edit, not initially :) I upvoted this as you provided answer and the correct pattern for MVC to handle this situation :D link for more info: http://www.growingwiththeweb.com/2012/12/aspnet-mvc-display-and-editor-templates.html – Tony Apr 18 '13 at 17:23
  • What is the purpose of the `virtual` modifier on that prop? – Graham Apr 18 '13 at 17:32
  • Tony i'll do :D @Shenaniganz, thanks for your answar i'll try it (if my emulator decide to collaborate) anyway someone of you are able to answere to this other post of mine? http://stackoverflow.com/questions/16058760/asp-net-mvc-form-and-double-fields/16074542#16074542 i had a problem working with double. – antedesk Apr 18 '13 at 18:14
  • @Graham oops, I forgot do delete it, copied from my Nhibernate entity. I'll delete it now. – InspiredBy Apr 18 '13 at 19:22
  • @Shenaniganz, Drats I was hoping that modifier did something secret and cool that I wasn't aware of :( – Graham Apr 19 '13 at 11:59