我想使用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]
模型中的来创建自己的模板以显示任何字段类型。这里有一些链接-
希望这对您有所帮助
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句