3

I want to use the Bootstrap 3 DateTimePicker. I added it to my ASP.NET project using NuGet.

Here's my 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 it in my View like 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 it doesn't work; any Ideas?

3
  • You should not include both regulary and minified versions of scripts and css files. E.g. do bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").Include( "~/Scripts/moment.min.js", "~/Scripts/bootstrap.min.js", "~/Scripts/bootstrap-datetimepicker.min.js")); Commented Jun 19, 2015 at 15:06
  • and you need to include jQuery lib Commented Jun 19, 2015 at 15:27
  • Can you please tell us what version of MVC you are using, What framework. You can use the model to set the datepicker with the @Html.EditorFor in your View. I will explain more when i have the details Commented Jun 19, 2015 at 19:48

2 Answers 2

4

The easiest way in MVC with bootstrap would be to set the properties in your model with Data Annotations.

Here is a link that should help you. Using Data Annotations for Model Validation

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

[DataType(DataType.Date)] This sets the attribute style and can be customized,

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)] This is the display format you would set to show in your Views.

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

public DateTime? ODoB { get; set; } if you add the question mark after DateTime this will allow the value to 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>

Preview

This display will show differently from IE to Chrome, IE is not yet HTML 5 compatible, but this will let the person filling out the form select each field of the date. there are many different conversions and templates you can create to achieve anything you want from the model. you can actually create your own template for display of any field type using the [UIHint] in your model. Here are a few links -

Custom templates in Asp.Net MVC

Asp.Net MVC annotated for input/

Editor templates, Data annotations and Telerik - oh my!

Hope this helped you

Sign up to request clarification or add additional context in comments.

7 Comments

Wow it seems to work! Can you please tell me is it possible to add time?
Please explain, are you talking about real live clock. or just time submitted. if time submitted this will post the time.
I want user to be able to select not only date but time. For example 24.06.2015 6.00 pm (it could be 24H format too). When I changed DateType attribute from DateType.Date to DateType.DateTime nothing has changed. But when I chage it to DateType.Time it works in way I need it however without selecting date.
I would separate the two and place them next to each other, have the date drop down, and next to it have the time drop down. in your controller you can join them together as a string before sending to the database. it will be more user friendly.
Check this link out on display and editfor templates. this will help you allot to modify anything you need to modify in MVC. codeguru.com/csharp/.net/net_asp/mvc/…
|
1

In order to use bootstrap-datetimepicker you need to include the following scripts/css in your page(s)

  • jQuery
  • Moment.js
  • Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
  • Bootstrap Datepicker script
  • Bootstrap CSS
  • Bootstrap Datepicker CSS
  • Moment.JS Locales

Most importantly you will need to load Moment.js before using the library so your moment.js should be called before your bootstrap-datetimepicker.js

1 Comment

I see. But I can't understand why I have Bootstrap Datepicker .less instead of .css in my Content folder

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.