在 ASP .NET MVC 5.1/HTML 5 特定中显示日期时间选择器而不是日期选择器

Posted

技术标签:

【中文标题】在 ASP .NET MVC 5.1/HTML 5 特定中显示日期时间选择器而不是日期选择器【英文标题】:Displaying DateTime picker instead of Date picker in ASP .NET MVC 5.1/HTML 5 specific 【发布时间】:2014-11-04 02:55:33 【问题描述】:

我在 ASP .NET MVC 5.1 中编写应用程序

我有一个字段:

  [DisplayName("Date of Birth")]
  [DataType(DataType.Date)]
  public DateTime BirthDate  get; set; 

然后在视图中

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

翻译为:

如果我只是将模型中属性上方的注释更改为:

    [DisplayName("Date of Birth")]
    [DataType(DataType.DateTime)]

我没有显示任何选择器。如果我将它们更改为:

 [DisplayName("Date of Birth")]
 [DataType(DataType.Time)]

只有 hh:mm 可供选择。

问题: 在 ASP .NET MVC 5.1 中显示日期时间选择器而不是日期选择器。我要求 ASP .NET 5.1 HTML 5 特定解决方案。

【问题讨论】:

【参考方案1】:

您的要求非常挑剔...

为字段指定属性Datatype,将生成一个input,具有指定的属性type。这就是为什么当您添加[DataType(DataType.Date)] 时,生成的输入将是一个日期选择器,但如果您添加[DataType(DataType.DateTime)],输入将是datetime 类型,因此您没有显示任何选择器。为什么?因为几年前,支持输入datetime 的浏览器决定停止支持它,W3C 由于缺乏实现而删除了这个功能。

然而,不久前,一些浏览器供应商又开始支持datetime-local,这又回到了草案中。目前ChromeOperaMicrosoft Edge的最新版本支持。

按照 Ajay Kumar 的建议,一种解决方案是使用 BootStrap 或 jQuery Datetime Picker。

如果您不介意少数支持的浏览器,另一种方法是使用datetime-local。比如这样:

@Html.TextBoxFor(model => model.BirthDate, new  type = "datetime-local")

【讨论】:

我一点也不觉得这很挑剔。仅仅因为某些事情尚未实施并不意味着要求它是挑剔的。我认为没有日期和时间选择器是荒谬的。现在是手机操作系统的标准控件,为什么不是浏览器? 我完全同意你的看法。我主要是说双关语 对不起。我很惭愧。我应该花更多时间阅读您的帖子【参考方案2】:

由于 html5 和支持 html5 的浏览器,您将获得此日期选择器。 可能的选择:

BootStrap datetime picker jQuery Datetime Picker

【讨论】:

我正在寻找 ASP .NET MVC 5.1 和 HTML 5 解决方案。没有 javascript、JQuery 等。除了安装 Safari 有没有其他解决方案? w3schools.com/html/… w3schools.com/html/… w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_time 您的引导链接用于日期选择器,而不是日期和时间,您的 w3schools 链接也是如此。【参考方案3】:

添加对象定义:

public class EditViewModel

    public string Id  get; set; 

    [Display(Name = "Username")]
    public string UserName  get; set; 

    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:yyyy-MM-ddThh:mm:ss")]
    [Display(Name = "Registed Date")]
    public DateTime RegistedDate  get; set; 

在.cshtml中添加为:

<div class="form-group">
    @Html.LabelFor(m => m.RegistedDate, new  @class = "col-md-2 control-label" )
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.RegistedDate, "0:yyyy-MM-ddThh:mm:ss", new  @class = "form-control", type = "datetime-local" )
        @Html.ValidationMessageFor(m => m.RegistedDate, "", new  @class = "text-danger" )
    </div>
</div>

【讨论】:

谢谢!杰出的!几个月来,我一直试图解决这个问题! 对于那些不尝试使用 jQuery UI 或其他插件的人来说是一个很好的解决方案。谢谢。【参考方案4】:

我的解决方案略有不同。虽然它确实使用 javascript/jQuery 来完成。如果您使用数据注释,我会接受事实

[Display(Name = "The Display Name")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:MM/dd/yy H:mm:ss tt")]
[DataType(DataType.DateTime)]
public DateTime DateTimeFieldName  get; set; 

现在您必须在页面(或捆绑包中)包含 jqueryUI 脚本和 CSS。在 Javascript 中:

$(function () //DOM ready code
    // Get data-annotations that are Marked DataType.DateTime and make them jquery date time pickers
    $('input[type=datetime]').datetimepicker( dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', changeMonth: true, changeYear: true, showAnim: 'slideDown' );
);// END DOM Ready

由于DataType(DataType.DateTime) 使用日期时间类型进行输入。只需使用这个事实并使用所有这些并使用 jQuery 使它们成为日期时间选择器。我的_Layout 页面包中包含此代码。

所以现在我要做的就是在模型中注释属性,它将显示为 jQuery 日期时间选择器。 您可能想要更改日期时间选择器的默认值。希望这可以帮助某人。

【讨论】:

以上是关于在 ASP .NET MVC 5.1/HTML 5 特定中显示日期时间选择器而不是日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET MVC 5、ASP.NET Core MVC 5 有啥区别?

ASP.NET 5 简介 MVC

如何在 ASP.NET Core 5 MVC (.NET 5) 中获取记录的用户数据?

备忘ASP.NET MVC 5 升级到 ASP.NET Core MVC 的部分变化

解读ASP.NET 5 & MVC6系列

在 IIS 上使用 .NET Core 运行 ASP.NET 5 (MVC 6)