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

Question

我想使用 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>

但是没用；有什么想法吗？

Answer 1

要使用 bootstrap-datetimepicker，您需要在页面中包含以下内容scripts/css

jQuery
Moment.js
Bootstrap.js（如果您不是，则需要过渡和折叠使用完整的 Bootstrap)
Bootstrap 日期选择器脚本
Bootstrap CSS
Bootstrap 日期选择器 CSS
Moment.JS 语言环境

最重要的是，您需要在使用库之前加载 Moment.js，因此您的 moment.js 应该在 bootstrap-datetimepicker.js

之前被调用

Answer 2

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

这里有一个 link 应该可以帮助你。 Using Data Annotations for Model Validation

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

[DataType(DataType.Date)] 这个设置属性样式，可以自定义，

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

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

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，但这会让填写表格的人 select日期。您可以创建许多不同的转换和模板来实现您想要从模型中获得的任何东西。实际上，您可以使用模型中的 [UIHint] 创建自己的模板来显示任何字段类型。这里有几个 links -

Custom templates in Asp.Net MVC

Asp.Net MVC annotated for input/

Editor templates, Data annotations and Telerik - oh my!

希望对您有所帮助

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

Using Bootstrap 3 DateTimePicker in ASP.NET MVC Project

jquery

asp.net-mvc

twitter-bootstrap

asp.net-mvc-4

bootstrap-datetimepicker