Using jQuery datepicker in asp.net mvc validation error in Edge Browser

Question

I am using jquery datepicker validator to validate text inputs.

The problem I have is, if I click submit it displays all error message correctly.

However, on the datepicker input, the text input on the date input not validate 23/11/2020, but validate 12/11/2020

In this case I think that the script change the month for day.

This only happens with debug VS 2019 in Edge browser... if try with IE 8 browser the validation is correctly.

What could be happening here. Thanks

My code as follows.

    public class PersonModel
    {
        [Column(TypeName = "date")]
        [Display(Name = "Spanish Date")]
        [Required]
        [DataType(DataType.Date)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime? SpanishDate { get; set; }
    }

    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <div>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="textarea">Spanish Date</td>
                    <td>

                        @Html.EditorFor(m => m.SpanishDate, "{0:dd/MM/yyyy}", new { htmlAttributes = new { @class = "textarea", placeholder = "Spanish Date", @readonly = "true" } })
                        @Html.ValidationMessageFor(m => m.SpanishDate, "", new { @class = "text-danger" })
                    </td>
                </tr>
            </table>
            <br />
            <hr class="new3">
            <div class="form-group">
                <div class="col-md-offset-5 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

@section Scripts {

    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/DatePicker.js");
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
        jQuery(function ($) {

            $.datepicker.regional['es'] = {
                 closeText: 'Cerrar',
                 prevText: '<Ant',
                 nextText: 'Sig>',
                 currentText: 'Hoy',
                 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                 monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                 dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                 weekHeader: 'Sm',
                 dateFormat: 'dd/mm/yy',
                 firstDay: 1,
                 isRTL: false,
                 showMonthAfterYear: false,
                 yearSuffix: ''
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);
        });

        var options = $.extend({},
            $.datepicker.regional["es"], {
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-2:+0",
            highlightWeek: true,
            maxDate: 0
        }
        );
        $("#SpanishDate").datepicker(options);
    </script>
}

Yu Zhou · Accepted Answer · 2020-11-24 08:07:06Z

0

I test and find that it will have date format conflict if we use jQuery datepicker and ASP.NET original DateTime picker together.

I suggest that you only use jQuery datepicker or the original ASP.NET DateTime picker. Both of them can validate the date value, you don't need to use them together. As the original ASP.NET DateTime picker can't work in IE, I suggest you to only use jQuery datepicker, then the code can work well on all browsers:

...
<td>
    @Html.ValidationMessageFor(m => m.SpanishDate, "", new { @class = "text-danger" })
    <input type="text" id="SpanishDate" placeholder = "Spanish Date" />
</td>
...

Result in Edge:

edited Nov 24, 2020 at 8:07

answered Nov 24, 2020 at 7:58

Yu Zhou

13.1k1 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Iter Lsic Iealf Over a year ago

thanks for help. But in this mode the form validate date input type null....

Yu Zhou Over a year ago

jQuery datepicker is a front end plugin and you only need to validate the date input in the front end. You can refer to this answer about how to validate the date input value using jQuery.

Collectives™ on Stack Overflow

Using jQuery datepicker in asp.net mvc validation error in Edge Browser

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related