在ASP.NET MVC项目中使用Bootstrap 3 DateTimePicker

德米特里·科谢沃(Dmitry Koshevoy)

我想使用Bootstrap 3 DateTimePicker。我使用NuGet将其添加到我的ASP.NET项目中。

这是我的BundleConfig.cs:

bundles.Add(new StyleBundle("~/Content/Bootstrap").Include("~/Content/bootstrap.css",
               "~/Content/bootstrap-theme.css",
               "~/Content/bootstrap-theme.min.css",
               "~/Content/bootstrap.min.css",
               "~/Content/less/_bootstrap-datetimepicker.less",
               "~/Content/less/bootstrap-datetimepicker-build.less"));

bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").Include(
               "~/Scripts/moment.min.js",
               "~/Scripts/bootstrap.js",
               "~/Scripts/bootstrap.min.js",
               "~/Scripts/bootstrap-datetimepicker.js",
               "~/Scripts/bootstrap-datetimepicker.min.js"));

我在这样的视图中使用它:

<div class="container">
  <div class="col-sm-6">
    <div class="form-group">
      <div class="row">
        <div class="col-md-8">
          <div id="datetimepicker12"></div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker12').datetimepicker({
        inline: true,
        sideBySide: true
      });
    });
  </script>
</div>

但这是行不通的。有任何想法吗?

泳池专业

使用引导程序在MVC中最简单的方法是使用数据注释在模型中设置属性。

这是一个对您有帮助的链接。使用数据注释进行模型验证

[DisplayName("Owners Date of Birth:")]将显示在中@Html.LabelFor,这将是您的字段的标签。

[DataType(DataType.Date)] 设置属性样式并可以自定义,

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)] 这是您将设置为在视图中显示的显示格式。

public DateTime ODoB { get; set; }这将设置数据的存储类型。这将不允许Nullable值。

public DateTime? ODoB { get; set; } 如果在DateTime之后添加问号,则该值将为null。

模型:

using System.ComponentModel.DataAnnotations;
Public class contact
{
    [Required(ErrorMessage = "Please Enter the owners First Name!")]
    [StringLength(50, MinimumLength = 3)]
    [DisplayName("First Name:")]
    [Display(Order = 9)]
    public string OFirstName { get; set; }

    [Required(ErrorMessage = "Please Enter the owners Last Name!")]
    [StringLength(50, MinimumLength = 3)]
    [DisplayName("Last Name:")]
    [Display(Order = 10)]
    public string OLastName { get; set; }

    [Required(ErrorMessage = "Please Enter the owners Address!")]
    [StringLength(50, MinimumLength = 3)]
    [DisplayName("Address:")]
    [Display(Order = 11)]
    public string OAddress { get; set; }

    [Required(ErrorMessage = "Please Enter the owners City!")]
    [StringLength(50, MinimumLength = 3)]
    [DisplayName("City")]
    [Display(Order = 12)]
    public string OCity { get; set; }

    [Required(ErrorMessage = "Please Enter the owners County!")]
    [StringLength(50, MinimumLength = 3)]
    [DisplayName("County:")]
    [Display(Order = 13)]
    public string OCounty { get; set; }


    [DisplayName("State:")]
    [Display(Order = 14)]
    public States OState { get; set; }

    [Required(ErrorMessage = "Please Enter the owners Postal code!")]
    [StringLength(50, MinimumLength = 3)]
    [DisplayName("Zip:")]
    [Display(Order = 15)]
    public string OPostal { get; set; }

    [Required(ErrorMessage = "You have not entered a phone numer for the Owner, Please enter the owners phone number so we can get back to you!")]
    [DataType(DataType.PhoneNumber)]
    [RegularExpression(@"^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$", ErrorMessage = "Invalid Phone Number!")]
    [StringLength(32)]
    [DisplayName("Phone Number")]
    [Display(Order = 16)]
    public string OPhone { get; set; }

    [Required(ErrorMessage = "You have not entered an Email address, Please enter your email address!")]
    [DataType(DataType.EmailAddress)]
    [DisplayName("Email Address")]
    [StringLength(128)]
    [RegularExpression(@"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$", ErrorMessage = "The Email field is not valid, Please enter a valid email address!")]
    [Display(Order = 17)]
    public string OUserEmailAddress { get; set; }

    [Required(ErrorMessage = "Please Enter your Social Security Number!")]
    [DisplayName("SSN #:")]
    [RegularExpression(@"^\d{9}|\d{3}-\d{2}-\d{4}$", ErrorMessage = "Invalid Social Security Number")]

    [Display(Order = 18)]
    public string OSocialNum { get; set; }

    [Required(ErrorMessage = "Please Enter the Owners Date of Birth!")]
    [DisplayName("Owners Date of Birth:")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    [Display(Order = 19)]
    public DateTime ODoB { get; set; }

    [Required(ErrorMessage = "Please Enter the Owners Occupation!")]
    [StringLength(100, MinimumLength = 3)]
    [DisplayName("What is your Occupation:")]
    [Display(Order = 20)]
    public string OOccupation { get; set; }
 }

看法:

<div class="col-md-4">
    <div class="form-group">
        @Html.LabelFor(model => model.ODoB, htmlAttributes: new { @class = "control-label col-md-8" })

        @Html.EditorFor(model => model.ODoB, new { htmlAttributes = new { @class = "form-control", @style = "width:300px" } })
        @Html.ValidationMessageFor(model => model.ODoB, "", new { @class = "text-danger" })

    </div>
</div>

预览

从IE到Chrome,此显示将有所不同,IE尚不兼容HTML 5,但这将使填写表格的人员可以选择日期的每个字段。您可以创建许多不同的转换和模板,以实现所需的模型效果。您实际上可以使用[UIHint]模型中的来创建自己的模板以显示任何字段类型这里有一些链接-

Asp.Net MVC中的自定义模板

Asp.Net MVC注释为输入/

编辑器模板,数据注释和Telerik-哦,天哪!

希望这对您有所帮助

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在多个项目中使用Asp.net MVC身份

来自分类Dev

在ASP.NET MVC项目中使用WebControl

来自分类Dev

ASP.Net MVC 5中的Bootstrap DateTimePicker

来自分类Dev

在 Asp.net MVC 3 项目中引用和使用 Angular 5+ 组件

来自分类Dev

Kendo DateTimePicker文化不起作用Asp.net MVC

来自分类Dev

在ASP NET MVC 6项目中使用System.Net.Mail

来自分类Dev

如何在ASP.NET MVC项目中使用.NET的GroupDocs Viewer?

来自分类Dev

在现有的ASP.NET MVC 5项目中使用WebAPI 2.2

来自分类Dev

在asp.net mvc4项目中使用draggable()jQuery函数?

来自分类Dev

在ASP.NET MVC项目中使用实体框架代码优先时登录失败错误

来自分类Dev

在测试项目中使用ASP.NET Core的ConfigurationBuilder

来自分类Dev

无法在ASP.Net vNext项目中使用会话

来自分类Dev

是否可以设置一个基础项目以在多个ASP.NET MVC项目中使用?

来自分类Dev

是否可以设置一个基础项目以在多个ASP.NET MVC项目中使用?

来自分类Dev

如何在同一个ASP.Net MVC项目中使用Unity MVC和Unity WebAPI

来自分类Dev

ASP.NET MVC 5 and Bootstrap 3

来自分类Dev

ASP.NET 在 mvc 6 项目中

来自分类Dev

如何在ASP.NET Core MVC和Angular项目中使用Angular Material组件(特别是滑块)?

来自分类Dev

Bootstrap 3 Datetimepicker自动提交

来自分类Dev

EditorTemplate 中的 Bootstrap 3 DateTimePicker

来自分类Dev

在.NET MVC C#项目中使用d3.js显示折线图时出现问题

来自分类Dev

是否可以在同一解决方案中使用单元测试项目中的Selenium测试ASP.NET MVC Web项目?

来自分类Dev

在ASP .Net Core项目中使用.Net用户控件(.ascx)的可能性

来自分类Dev

在Asp.Net MVC中使用Bootstrap模态删除Confirm

来自分类Dev

datetimepicker在asp.net核心中不起作用

来自分类Dev

ASP.NET MVC 5和Bootstrap 3

来自分类Dev

如何通过循环使用Asp.Net MVC Razor语法连续显示3个项目

来自分类Dev

如何在ASP.net项目中使用CKEditor 4.5.7

来自分类Dev

在非Asp.Net 5项目中使用gulp或grunt

Related 相关文章

  1. 1

    在多个项目中使用Asp.net MVC身份

  2. 2

    在ASP.NET MVC项目中使用WebControl

  3. 3

    ASP.Net MVC 5中的Bootstrap DateTimePicker

  4. 4

    在 Asp.net MVC 3 项目中引用和使用 Angular 5+ 组件

  5. 5

    Kendo DateTimePicker文化不起作用Asp.net MVC

  6. 6

    在ASP NET MVC 6项目中使用System.Net.Mail

  7. 7

    如何在ASP.NET MVC项目中使用.NET的GroupDocs Viewer?

  8. 8

    在现有的ASP.NET MVC 5项目中使用WebAPI 2.2

  9. 9

    在asp.net mvc4项目中使用draggable()jQuery函数?

  10. 10

    在ASP.NET MVC项目中使用实体框架代码优先时登录失败错误

  11. 11

    在测试项目中使用ASP.NET Core的ConfigurationBuilder

  12. 12

    无法在ASP.Net vNext项目中使用会话

  13. 13

    是否可以设置一个基础项目以在多个ASP.NET MVC项目中使用?

  14. 14

    是否可以设置一个基础项目以在多个ASP.NET MVC项目中使用?

  15. 15

    如何在同一个ASP.Net MVC项目中使用Unity MVC和Unity WebAPI

  16. 16

    ASP.NET MVC 5 and Bootstrap 3

  17. 17

    ASP.NET 在 mvc 6 项目中

  18. 18

    如何在ASP.NET Core MVC和Angular项目中使用Angular Material组件(特别是滑块)?

  19. 19

    Bootstrap 3 Datetimepicker自动提交

  20. 20

    EditorTemplate 中的 Bootstrap 3 DateTimePicker

  21. 21

    在.NET MVC C#项目中使用d3.js显示折线图时出现问题

  22. 22

    是否可以在同一解决方案中使用单元测试项目中的Selenium测试ASP.NET MVC Web项目?

  23. 23

    在ASP .Net Core项目中使用.Net用户控件(.ascx)的可能性

  24. 24

    在Asp.Net MVC中使用Bootstrap模态删除Confirm

  25. 25

    datetimepicker在asp.net核心中不起作用

  26. 26

    ASP.NET MVC 5和Bootstrap 3

  27. 27

    如何通过循环使用Asp.Net MVC Razor语法连续显示3个项目

  28. 28

    如何在ASP.net项目中使用CKEditor 4.5.7

  29. 29

    在非Asp.Net 5项目中使用gulp或grunt

热门标签

归档