Using Bootstrap 3 DateTimePicker in ASP.NET MVC Project

The easiest way in MVC with bootstrap is to set properties in your model using DataAnnotations.

Here is a link that should help you. Using data annotations to validate a model

[DisplayName ("Owners Date of Birth:")]
Will be displayed in @ Html.LabelFor and this will be the label for your field.

[DataType.Date] This sets the style of the attribute and can be changed by

[DisplayFormat (DataFormatString = "{0: MM / dd / yyyy}", ApplyFormatInEditMode = true)] This is the display format that will be displayed in your views.

public DateTime ODoB {get; set; } This sets the storage type. this will not allow Nullable values.

public DateTime? ODoB {get; set; } if you add a question mark after the DateTime it will be null.

Model:

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

      

        
        
        
      

    

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>

      

        
        
        
      

    

This display will be different from IE to Chrome, IE is not HTML 5 compatible yet, but it will allow the person filling out the form to select each date field. there are many different conversions and templates that you can create in order to get everything you want from a model. you can create your own template to display any type of field using [UIHint] in your model. here are some 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 this helped you