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

这是一个可以帮助您的链接。 Using Data Annotations for Model Validation

[DisplayName（“所有者出生日期：”）]
将显示在@ Html.LabelFor中，这将是您的字段的标签。

[数据类型（DataType.Date）] 这设置了属性样式，可以自定义，

[DisplayFormat（DataFormatString =“{0：MM / dd / yyyy}”，ApplyFormatInEditMode = true）] 这是您设置在视图中显示的显示格式。

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

公共日期时间？ 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>

Preview

此显示将显示从IE到Chrome的不同，IE尚未与HTML 5兼容，但这将让填写表单的人选择日期的每个字段。您可以创建许多不同的转换和模板，以便从模型中获得您想要的任何内容。您实际上可以使用模型中的[UIHint]创建自己的模板以显示任何字段类型。这里有几个链接。

http://www.devcurry.com/2013/04/custom-templates-in-aspnet-mvc.html

https://www.simple-talk.com/dotnet/asp.net/asp.net-mvc-annotated-for-input/

https://nederveld.wordpress.com/2011/02/16/editortemplates-dataannotations-and-telerik-oh-my/

希望这有助于你

Answer 2

要使用bootstrap-datetimepicker，您需要在页面中包含以下脚本/ css

的jQuery
Moment.js
Bootstrap.js（如果不是，则需要转换和折叠使用完整的Bootstrap）
Bootstrap Datepicker脚本
Bootstrap CSS
Bootstrap Datepicker CSS
Moment.JS Locales

最重要的是，你需要在使用库之前加载Moment.js，这样你的moment.js应该在你的bootstrap-datetimepicker.js之前被调用

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

2 个答案: