Confirm date and date and time using Bootstrap date and time picker, JQuery validation plugin in Asp.Net MVC4 application

I am currently developing MVA Asp.Net 4.6 WebApp with Bootstrap 3.1.1 , Eonasdan datetime picker v4.7.14 and the jQuery v1.14.0 authentication plugin .

And I have some problems with checking the date.

  • My model looks like this:

    public class PersonModel{
        ...
    
        [Required]
        [Display(Name = "Date of Birth")]
        public DateTime? DateOfBirth { get; set; }
    
        ...        
    }
    
  • My view is as follows:

    <div class="form-group">
        @Html.LabelFor(x => x.DateOfBirth):
        <span class="text-danger"><b>*</b></span>
        <div class="input-group datepicker">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
            @Html.TextBoxFor(x => x.DateOfBirth, new {@class = "form-control", @data_date_format = "DD/MM/YYYY", @placeholder = "DD/MM/YYYY"})
        </div>
        @Html.ValidationMessageFor(x => x.DateOfBirth, "", new { @class = "text-danger" })
    </div>
    
  • Related Js code to initialize datetime picker:

    (function () {
        // Init bootstrap date/time pickers
        $(".datepicker").datetimepicker({
            useCurrent: false
        });
    })(jQuery);
    

    Using jQuery.validator, even if the date looks good, I always get this error:

    enter image description here

    I know that jQuery.validatorworks fine with jquery.ui.datepicker, but how can I get it to work with bootstrap.datetimepicker?

+4
1

date Jquery.validator:

(function () {
    // overrides the jquery date validator method
    jQuery.validator.methods.date = function (value, element) {
        // All dates are valid....
        return true;
    };
})(jQuery);

moment.js, , :

(function () {
    // overrides the jquery date validator method
    jQuery.validator.methods.date = function (value, element) {
        // We want to validate date and datetime
        var formats = ["DD/MM/YYYY", "DD/MM/YYYY HH:mm"];
        // Validate the date and return
        return moment(value, formats, true).isValid();
    };
})(jQuery, moment);
+7

All Articles