在边缘浏览器中的 asp.net mvc 验证错误中使用 jQuery datepicker

Posted 2023-05-09

【中文标题】在边缘浏览器中的 asp.net mvc 验证错误中使用 jQuery datepicker

【英文标题】：Using jQuery datepicker in asp.net mvc validation error in Edge Browser

【发布时间】：2021-03-06 10:04:15

【问题描述】：

我正在使用jquery datepicker 验证器来验证文本输入。

我的问题是，如果我点击提交，它会正确显示所有错误消息。

但是，在日期选择器输入上，日期输入上的文本输入不验证23/11/2020，而是验证12/11/2020

在这种情况下，我认为脚本将月份更改为一天。

只有在 Edge 浏览器中调试 VS 2019 时才会发生这种情况...如果尝试使用 IE 8 浏览器，则验证正确。

这里可能会发生什么。谢谢

我的代码如下。

    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>

【参考方案1】：

我测试发现如果我们一起使用jQuery datepicker和ASP.NET原始DateTime picker会出现日期格式冲突。

我建议您只使用 jQuery 日期选择器或原始的 ASP.NET 日期时间选择器。它们都可以验证日期值，您不需要一起使用它们。由于原来的 ASP.NET DateTime picker 在 IE 中无法使用，我建议你只使用 jQuery datepicker，然后代码可以在所有浏览器上正常运行：

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

边缘结果：

【讨论】：

感谢您的帮助。但在这种模式下，表单验证日期输入类型为 null....

jQuery datepicker 是一个前端插件，你只需要在前端验证输入的日期。可以参考this answer关于如何使用jQuery验证日期输入值。