jquery - Using Bootstrap 3 DateTimePicker in ASP.NET MVC Project -

August 15, 2013

i want use bootstrap 3 datetimepicker. added asp.net project using nuget.

here's 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"));

and i'm using in view this:

<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>

but doesn't work; ideas?

the easiest way in mvc bootstrap set properties in model dataannotations.

here link should you. using data annotations model validation

[displayname("owners date of birth:")]
display in @html.labelfor , label field.

[datatype(datatype.date)] sets attribute style , can customized,

[displayformat(dataformatstring = "{0:mm/dd/yyyy}", applyformatineditmode = true)] display format set show in views.

public datetime odob { get; set; } set storage type of data. not allow nullable values.

public datetime? odob { get; set; } if add questionmark after datetime allow value null.

model:

using system.componentmodel.dataannotations; public class contact  {    [required(errormessage = "please enter owners first name!")]     [stringlength(50, minimumlength = 3)]     [displayname("first name:")]     [display(order = 9)]     public string ofirstname { get; set; }      [required(errormessage = "please enter owners last name!")]     [stringlength(50, minimumlength = 3)]     [displayname("last name:")]     [display(order = 10)]     public string olastname { get; set; }      [required(errormessage = "please enter owners address!")]     [stringlength(50, minimumlength = 3)]     [displayname("address:")]     [display(order = 11)]     public string oaddress { get; set; }      [required(errormessage = "please enter owners city!")]     [stringlength(50, minimumlength = 3)]     [displayname("city")]     [display(order = 12)]     public string ocity { get; set; }      [required(errormessage = "please enter 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 owners postal code!")]     [stringlength(50, minimumlength = 3)]     [displayname("zip:")]     [display(order = 15)]     public string opostal { get; set; }      [required(errormessage = "you have not entered phone numer owner, please enter owners phone number can 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 email address, please enter email address!")]     [datatype(datatype.emailaddress)]     [displayname("email address")]     [stringlength(128)]     [regularexpression(@"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$", errormessage = "the email field not valid, please enter valid email address!")]     [display(order = 17)]     public string ouseremailaddress { get; set; }      [required(errormessage = "please enter 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 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 owners occupation!")]     [stringlength(100, minimumlength = 3)]     [displayname("what occupation:")]     [display(order = 20)]     public string ooccupation { get; set; }  }

view:

<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

this display show diferently ie chrome, ie not yet html 5 compatable, let person filling out form select each field of date. there many different conversions , templates can create acheaive want model. can create own template display of field type using [uihint] in model. here few links.

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/

hope helped you