CODEWITHSUNDEEP
jqueryasp.netjquery-uiasp.net-mvc-4
antedesk
antedesk

Reputation: 756

ASP.NET MVC 4 does not work with jquery datepicker

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

}

Upvotes: 2

Views: 11665

Answers (2)

InspiredBy
InspiredBy

Reputation: 4320

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

Upvotes: 1

Jason Berkan
Jason Berkan

Reputation: 8884

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.

Upvotes: 7

Related Questions