Bootstrap 3 Datepicker 和 DateTime 验证错误

Posted 2023-05-07

【中文标题】Bootstrap 3 Datepicker 和 DateTime 验证错误

【英文标题】：Bootstrap 3 Datepicker and DateTime validation error

【发布时间】：2016-03-12 20:17:07

【问题描述】：

我正在使用 Bootstrap 3 Datepicker (http://eonasdan.github.io/bootstrap-datetimepicker/) 为模型属性提供 DateTime Picker：

型号：

[Table("Calls")]
public partial class Call

    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int Id  get; set; 

    [Required(ErrorMessage = "Campo obrigatório")]
    [Display(Name = "Data e Hora de início")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:dd-MM-yyyy HH:mm")]
    public DateTime DateOfTheCall  get; set; 

查看：

<div class="form-group">
    @html.LabelFor(model => model.DateOfTheCall, htmlAttributes: new  @class = "control-label col-md-2" )
    <div class="col-md-10">
        @Html.EditorFor(model => model.DateOfTheCall, new  htmlAttributes = new  @class = "form-control date"  )
        @Html.ValidationMessageFor(model => model.DateOfTheCall, "", new  @class = "text-danger" )
    </div>
</div>

我用日期格式设置日期选择器：

// initialise any date pickers
$('.date').datetimepicker(
    locale: 'pt',
    format: 'DD-MM-YYYY HH:mm'
);

我还在 web.config 文件中设置了文化：

<globalization culture="pt-PT"/>

但我总是收到错误消息：

The field Data e Hora de início must be a date.

【问题讨论】：

您可以通过 javascript 验证您的 datetimepicker，创建一个检查值的函数。

我认为您的 @Html.EditorFor 生成为 type='textbox' 的文本框，但它应该是 type='date'。这可能会对您有所帮助

@Nimmi 嗨，谢谢，如何更改 EditorFor 的类型？

@KK.K 嗨，谢谢，日期选择器已经进行了验证，问题是定义是日期时间类型的模型

您好，我是一个不太擅长 C# 的 UI 人员，但此链接可能会帮助您更改类型：***.com/questions/10251153/…

【参考方案1】：

经过很多小时，我终于找到了一种方法来创建一个好的解决方案，基于 jQuery Validation Globalize Plugin：

项目网址：https://github.com/johnnyreilly/jquery-validation-globalize

此扩展具有以下依赖项：

jQuery 验证（它本身依赖于 jQuery） 全球化 v1.x（它本身依赖于 CDLR）

最终代码

首先，包括库（尊重顺序）：

<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/moment-with-locales.min.js"></script>
<script src="~/Scripts/bootstrap/bootstrap.js"></script>
<script src="~/Scripts/respond/respond.js"></script>
<script src="~/Scripts/jquery/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery/jquery.validate.globalize.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>

我将模块模式用于脚本：

// Module Pattern
// More information: http://toddmotto.com/mastering-the-module-pattern/

var Layout = (function ($) 
    // Prevents certain actions from being taken and throws exceptions
    "use strict";

    // Private functions
    var _init = function () 

        // Use $.getJSON instead of $.get if your server is not configured to return the
        // right MIME type for .json files.
        $.when(
            $.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
            $.getJSON("/Scripts/cldr/main/numbers.json"),
            $.getJSON("/Scripts/cldr/main/ca-gregorian.json"),
            $.getJSON("/Scripts/cldr/supplemental/timeData.json")
        ).then(function () 

            // Normalize $.get results, we only need the JSON, not the request statuses.
            return [].slice.apply( arguments, [ 0 ] ).map(function( result ) 
                return result[ 0 ];
            );

        ).then( Globalize.load ).then(function() 

            // Your local settings code goes here.
            Globalize.locale("pt-PT");
        );

        // initialise any date pickers (I had my own properties)
        $('.date').datetimepicker(
            locale: 'pt',
            format: 'DD-MM-YYYY HH:mm',
            sideBySide: true,
            showClose: true,
            defaultDate: new Date(Date.now()),
            toolbarPlacement: 'top',
            showTodayButton: true,
            showClear: true,
        );
    ;

    return 

        // Public functions
        init: _init

    ;

)(jQuery);

// Load when ready
$(document).ready(function () 
    Layout.init();
);

视图保持不变。

【参考方案2】：

我认为 locale : "pt" 被错误地提及了。请删除它并测试。

请阅读以下内容：

【讨论】：

您好，感谢您的帮助，但我尝试了您的解决方案，但无法运行。你可以检查我的，看看你是否同意。