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

4 posts, 0 answers
  1. Lorenzo
    Lorenzo avatar
    42 posts
    Member since:
    Jul 2009

    Posted 06 Dec 2012 Link to this post

    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 !
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 10 Dec 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Lorenzo
    Lorenzo avatar
    42 posts
    Member since:
    Jul 2009

    Posted 02 Jan 2013 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Jan 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready