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 · Answer 1 · 2020-11-24T08:07:06.723

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 '20 at 08:07

answered Nov 24 '20 at 07:58

Yu Zhou

11,532
1
8
22

thanks for help. But in this mode the form validate date input type null.... – Iter Lsic Iealf Nov 24 '20 at 10:29
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](https://stackoverflow.com/questions/3149877/jquery-datepicker-validate-current-input-value/39110867#39110867) about how to validate the date input value using jQuery. – Yu Zhou Nov 25 '20 at 08:12

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

1 Answers1