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 749 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Lorenzo
Top achievements
Rank 1
Lorenzo asked on 06 Dec 2012, 03:38 PM
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 !

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 10 Dec 2012, 09:44 AM
Hello Lorenzo,

 
The jQuery validate does not validate dates, which have different internationalization than en-US. I will suggest you check this blog post for more information.

Greetings,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Lorenzo
Top achievements
Rank 1
answered on 02 Jan 2013, 12:49 PM
Hi, I've read the document you suggested and I'm already working with that approach, but my point is: is there a way to do it all Kendo UI ? Included validation ?

thanks 

Lorenzo
0
Daniel
Telerik team
answered on 04 Jan 2013, 11:07 AM
Hello Lorenzo,

Yes there is a way by initializing a Kendo Validator on the form. The date will be validated based on the registered Kendo culture. The kendo.parseDate can also be used to check if the date is valid based on a specific format or on the registered culture.

Kind regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Date/Time Pickers
Asked by
Lorenzo
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Lorenzo
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or