[英]Using Bootstrap 3 DateTimePicker in ASP.NET MVC Project
我想使用 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; }
public DateTime ODoB { get; set; }
这个集合中的数据的存储类型。 这将不允许 Nullable 值。
public DateTime? ODoB { get; set; }
public DateTime? ODoB { get; set; }
如果日期时间后加问号,这将允许该值是空的。
模型:
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]
创建自己的模板来显示任何字段类型。 这里有几个链接——
希望这对你有帮助
为了使用 bootstrap-datetimepicker,您需要在页面中包含以下脚本/css
最重要的是,您需要在使用库之前加载 Moment.js,因此您的 moment.js 应该在 bootstrap-datetimepicker.js 之前被调用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.