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

}
Improve this question
3
  • 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 Commented Apr 18, 2013 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? :) Commented Apr 18, 2013 at 19:08
  • you need to set date format which will reflect your current culture on ASP.NET application, like described in answers. Commented Apr 19, 2013 at 0:41

2 Answers 2

Reset to default
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.

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

4 Comments

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
datepicker uses 'y' for 2-digit years and 'yy' for 4-digits.
@antedesk - What does your model look like? Can you add that in to your question?
@JasonBerkan I add the view model to my question. thanks for your time
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' });
Improve this answer

7 Comments

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
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 :)
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: growingwiththeweb.com/2012/12/…
What is the purpose of the virtual modifier on that prop?
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? stackoverflow.com/questions/16058760/… i had a problem working with double.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.