This is a migrated thread and some comments may be shown as answers.

DataAnnotations DateTime Picker validation unobtrusive Localization: cannot make it work !

3 Answers 927 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

Lorenzo asked on 06 Dec 2012, 03:38 PM

Schermata-2012-12-06-a-16-37-44.png

Hi I'm relatively new to ASP.NET MVC and I'm trying to male it work together with Kendo UI.
The problem here is about DateTime field and the way that it is validated. I've been looking for a solution to this problem for two days and I've read quite a lot about ways to get around the question, but the point is that if I have to plan to use Kendo UI all over my application I have to have a safe way to handle situations like this one. So I'm looking for a clear solution about this situation (that is a good sample).

I report here a very simple case study with an example of what I cannot make work.
I've build a model using DataAnnotations and specified the DataType for the date field.
I've built a _Layout page with (i think) all the scripts needed.
I've built a View with a very bare minimum of two fields.
I've built an EditorTemplate to manage DateTime fields.
Though I'm Italian and the date format is not considered correct. Plus the error message has nothing to do with that I specified in the datamodel.
I report my code following

The Data model

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel.DataAnnotations;

namespace G4.Models

{

public class myModel

{

[Display(Name="Name")]

[Required(ErrorMessage="The field Name is required")]

public string name { get; set; }

[Display(Name = "Birth Date")]

[Required(ErrorMessage = "The field Birth Date is required")]

[DataType(DataType.Date, ErrorMessage="Wrong format !!!!")]

public DateTime bDate { get; set; }

}

The Controller (just the action)

public ActionResult myView() {

G4.Models.myModel model = new G4.Models.myModel();

return View(model);

}

The _Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/kendo/css")

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.custom.min.js")"></script>

<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.validator.min.js")"></script>

<script src="@Url.Content("~/Scripts/cultures/kendo.culture.it-IT.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

The view

@model G4.Models.myModel

@{

ViewBag.Title = "myView";

Layout = "~/Views/Shared/_myLayout.cshtml";

}

<h2>

myView</h2>

@using (Html.BeginForm())

{

@Html.LabelFor(m => m.name)<br />

@Html.EditorFor(m => m.name)

<br /><br />

@Html.LabelFor(m => m.bDate)<br />

@Html.EditorFor(m => m.bDate)

@Html.ValidationMessageFor(m => m.bDate)

})

The EditorTemplate

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))

The Result is attached !

DataAnnotations DateTime Picker validation unobtrusive Localization: cannot make it work !

3 Answers, 1 is accepted