首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Microsoft Edge - MVC应用程序中的引导日期选择器不再显示

Microsoft Edge - MVC应用程序中的引导日期选择器不再显示
EN

Stack Overflow用户
提问于 2021-08-11 21:26:01
回答 1查看 370关注 0票数 0

我有一个MVC应用程序,在Microsoft中查看它时有一些奇怪的地方,特别是日期选择器。日期选择器是引导程序。在这方面,有以下几点:

代码语言:javascript
复制
<div class="col-xs-3 col-md-2">
 @Html.EditorFor(m => m.Inputs.Management.AssessmentDate)
</div>

在DateTime.cshtml编辑器模板中,如下所示:

代码语言:javascript
复制
 @model Nullable<DateTime>
 @{

DateTime dt = DateTime.Now;

if (Model != null)
{

    dt = (System.DateTime)Model;

}

@Html.TextBox("", String.Format("{0:dd-MMM-yyyy}", dt), new { @class = "medium-input form-control datecontrol", type = "date" })
}

在datepicker-ready.js (引导)中:

代码语言:javascript
复制
if (!Modernizr.inputtypes.date) {

$(function () {

    $(".datecontrol").datepicker();

});}

模式:

显示(名称=“管理”)公共ActivityViewModel管理{ get;set;}

字段没有解析保存在数据库中的日期。它只显示mm/dd/yyyy和一个日历图标(选择器)。当我查看源时,我会看到以下内容:

当我将文本“使用日期模板”添加到编辑器模板时,我会看到每个日期输入字段的文本,因此我知道正在使用编辑器模板。

当我在@Html.Textbox中将类型的值从" date“更改为"text”时,日期会显示,但选择器不会显示。当我按照如下方式更改视图中的代码时(从EditorFor到TextBoxFor和日期格式更改),情况也是一样的:

@Html.TextBoxFor(m => m.Inputs.AssessmentDate,“{0:yyyy}”,新的{ @class =“媒体输入表单-控制数据控制”,@=>= "date“})

日期将显示为04/24/2017和日历图标(选择)。我点击采摘器,显示2017年4月上榜的月份和年份。当我选择4月25日的时候,顶部的月份就会跳到10月,而这一年只会显示出29个。只要我从字段中单击,日期就会更改为mm/dd/yyyy。

同样,“使用日期模板”的文本也不再显示,所以当我更改视图中的输入时,我知道它没有使用编辑器模板。据我所读(可能是误解),Microsoft有它自己的数据报警器,所以我想知道该数据报警器和HTML 5数据选择器之间是否有冲突?有什么想法?

NEW -如果我更改的话,请回复@徐东彭

代码语言:javascript
复制
@Html.TextBox("", String.Format("{0:dd-MMM-yyyy}", dt), new { @class = 
 "medium-input form-control datecontrol", type = "date" })

代码语言:javascript
复制
 @Html.TextBox("", String.Format("{0:yyyy-MM-dd}", dt), new { @class = "medium-input form-control datecontrol", type = "date" })

在DateTime.cshtml EditorTemplate中,日期显示为01/29/2018。单击日期选择器时:

选择器顶部的月份和年份显示为2018年1月,第29次highlighted

  • when i为2018年1月单击22,从2018年1月到7月34

  • 在字段中更改为01/22/2018

  • the月份和年份,控制台出现错误,显示为11-7月-34不符合要求的格式

当我单击datepicker外部时,字段中的日期返回到mm/dd/yyyy,但7月34仍然显示为我单击选择器时的月份和年份。

引导程序的脚本被捆绑并作为应用程序启动(即BundleConfig.cs)的一部分加载:

代码语言:javascript
复制
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/datepicker-ready.js"));

如果我注释掉了引导-datepicker.js和datepicker-ready.js的行,并运行代码:

日期显示为mm/dd/yyyy,即01/29/2018

  • the datepicker显示2018年1月的顶部,22 is highlighted

  • when I选择第18、月份和年份2018年1月,继续显示在日期选择器的顶部,日期01/18/2018显示

因此,注释掉有关数据报警器的两行,现在允许显示日期和选择新的日期。我假设现在它正在利用HTML5日期选择器。

-Why不是在输入字段中显示为yyyy吗?-Where是来自控制台的错误?-How可以将显示日期格式化为display吗?使用jQuery数据报警器会更好吗?我尝试将DisplayFormat(DataFormatString =“{0:yyyy dd}”,ApplyFormatInEditMode = true)添加到ViewModel中,并将String.Format改为dd,但这是一个拒绝。

代码语言:javascript
复制
[Display(Name = "Adequacy:")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime? AssessmentDate { get; set; }
EN

回答 1

Stack Overflow用户

发布于 2021-08-13 04:25:06

根据您的描述,我使用了您提供的部分代码来测试和引用similar case。我发现HTML5日期选择器规范规定日期必须是yyyy-MM-dd (ISO格式)格式。

当TextBox类型为date时,您将在控制台中看到类似于此的消息:

但是我发现引导数据报警器中的格式yyyy-mm-dd可以工作,而且我认为定义内容有区别。一个简单的例子:

代码语言:javascript
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<div class="text-center">
    @model Nullable<DateTime>
    @{
        DateTime dt = DateTime.Now;
        if (Model != null)
        {
            dt = (System.DateTime)Model;
        }

        @Html.TextBox("testDate", String.Format("{0:yyyy-MM-dd}", dt), new { @class = "medium-input form-control datecontrol", type = "date" })
    }
</div>
<script>
    //if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datecontrol").datepicker({
            format:'yyyy-mm-dd'
        });
    });
    //}
</script>

因此,我认为这两个日期管制确实有冲突。如果需要引导数据报警器,可以尝试通过css样式将日期图标放置在input [type='text']的末尾,否则必须使用html5日期选择器。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68749093

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档