jquery - 在 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"));

我在我的 View 中使用它，如下所示:

<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 的 MVC 中最简单的方法是使用数据注释在模型中设置属性。

这是一个应该对您有帮助的链接。 Using Data Annotations for Model Validation

[DisplayName("所有者出生日期:")]将显示在 @Html.LabelFor 中，这将是您的字段的标签。

[数据类型(DataType.Date)]这里设置属性样式，可以自定义，

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

公共(public) DateTime ODoB { 获取；放; }这设置了数据的存储类型。这不允许 Nullable 值。

公共(public)日期时间？ ODoB { 得到；放; }如果在 DateTime 之后添加问号，则该值将为空。

型号:

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] 创建自己的模板来显示任何字段类型。这里有一些链接 -

Custom templates in Asp.Net MVC

Asp.Net MVC annotated for input/

Editor templates, Data annotations and Telerik - oh my!

希望这对您有帮助