How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine

Question

I need some guide lines on how to install a Date Picker Bootstrap 3 on a MVC 5 project using the Razor engine  I found this link here but couldn t make it work in VS2013    Copying from the example in the later link above I ve already done the following                bundles Add new ScriptBundle    bundles bootstrap   Include                       Scripts bootstrap js                        Scripts bootstrap-datepicker js            NEW for Bootstrap Datepicker                      Scripts respond js              bundles Add new StyleBundle    Content css   Include                       Content bootstrap css                        Content bootstrap-datepicker css          NEW for Bootstrap Datepicker                      Content site css       Then I ve added the script to the index view as follow   section Scripts    Scripts Render    bundles jqueryval     lt script type  text javascript  gt          datepicker   datepicker      Initialise any date pickers  lt  script gt      Now  how to call the date picker here       lt div class  form-group input-group-sm  gt       Html LabelFor model   gt  model DropOffDate       Html TextBoxFor model   gt  model DropOffDate  new    class    form-control   placeholder    Enter Drop-off date here             Html ValidationMessageFor model   gt  model DropOffDate   lt  div gt

User · Answer

Simple     DataType DataType Date   Public DateTime Ldate  get set

User · Answer

Add just these two lines before the datetime property in your model   DataType DataType Date     DisplayFormat DataFormatString     0 yyyy-MM-dd    ApplyFormatInEditMode   true     and result will be

User · Answer

This answer simply applies the type date attribute to the HTML input element and relies on the browser to supply a date picker   Note that even in 2017  not all browsers provide their own date picker  so you may want to provide a fall back   All you have to do is add attributes to the property in the view model  Example for variable Ldate    DataType DataType Date    DisplayFormat DataFormatString     0 yyyy-MM-dd    ApplyFormatInEditMode   true   Public DateTime Ldate  get set     Assuming you re using MVC 5 and Visual Studio 2013

User · Answer

This answer uses the jQuery UI Datepicker  which is a separate include   There are other ways to do this without including jQuery UI   First  you simply need to add the datepicker class to the textbox  in addition to form-control    lt div class  form-group input-group-sm  gt       Html LabelFor model   gt  model DropOffDate       Html TextBoxFor model   gt  model DropOffDate  new    class    form-control datepicker   placeholder    Enter Drop-off date here             Html ValidationMessageFor model   gt  model DropOffDate   lt  div gt    Then  to be sure the javascript is triggered after the textbox is rendered  you have to put the datepicker call in the jQuery ready function    lt script type  text javascript  gt        function         will trigger when the document is ready            datepicker   datepicker      Initialise any date pickers          lt  script gt

User · Answer

DataType DataType Date   public DateTime BirthDate   get  set      decorate your model like this  can use a bootstrap date time picker I used this one  https   github com Eonasdan bootstrap-datetimepicker   I suppose you already have bundles for bootstrap css and js  Your date picker bundle entries   bundles Add new ScriptBundle    bundles datePicker   Include                Scripts moment min js                 Scripts bootstrap-datetimepicker min js              bundles Add new StyleBundle    Content datepicker   Include                      Content bootstrap-datetimepicker min css       Render bundles on your Layout View   Styles Render    Content datepicker    Scripts Render    bundles datePicker     Your HTML in view   lt div class  form-group  gt           Html LabelFor model   gt  model BirthDate  htmlAttributes  new    class    lead col-md-2              lt div class  col-md-10  gt               Html TextBoxFor model   gt  model BirthDate  new    class    datetimepicker form-control                  Html ValidationMessageFor model   gt  model BirthDate      new    class    text-danger              lt  div gt   lt  div gt    At the end of your view add this    lt script gt        document  ready function                  datetimepicker   datetimepicker               format   lll                       lt  script gt

User · Answer

1 make sure you ref jquery js at first 2 check layout make sure you call    bundles bootstrap  3 check layout see render section Scripts position it must be after    bundles bootstrap  4 add class  datepicker  to textbox 5 put     datepicker   datepicker    in   function

User · Answer

Attempting to provide a concise update  based on Enzero s answer    Install the Bootstrap Datepicker package   PM gt  install-package Bootstrap Datepicker     Successfully installed  Bootstrap Datepicker 1 7 1  to      In AppStart BundleConfig cs  add the related scripts and styles in the bundles          bundles Add new ScriptBundle    bundles bootstrap   Include                        Scripts bootstrap-datepicker js            Scripts locales bootstrap-datepicker YOUR-LOCALE-CODE-HERE min js      bundles Add new StyleBundle    Content css   Include                      Content bootstrap-datepicker3 css      In the related view  in the scripts  section  enable and customize datepicker    section scripts       lt script type  text javascript  gt                            datepicker   datepicker               format   dd mm yyyy     choose the date format you prefer             language   YOUR-LOCALE-CODE-HERE               orientation   left bottom                   lt  script gt   Eventually add the datepicker class in the related control  For instance  in a TextBox and for a date format in the like of  31 12 2018  this would be    Html TextBox  YOUR-STRING-FOR-THE-DATE     0 dd MM yyyy    new    class    datepicker

User · Answer

I hope this can help someone who was faced with my same problem   This answer uses the Bootstrap DatePicker Plugin  which is not native to bootstrap   Make sure you install Bootstrap DatePicker through NuGet   Create a small piece of JavaScript and name it DatePickerReady js save it in Scripts dir  This will make sure it works even in non HTML5 browsers although those are few nowadays   if   Modernizr inputtypes date          function                  datecontrol   datepicker                 Set the bundles   bundles Add New ScriptBundle    bundles bootstrap   Include                   Scripts bootstrap js                    Scripts bootstrap-datepicker js                    Scripts DatePickerReady js                    Scripts respond js     bundles Add New StyleBundle    Content css   Include                   Content bootstrap css                    Content bootstrap-datepicker3 css                    Content site css      Now set the Datatype so that when EditorFor is used MVC will identify what is to be used    lt Required gt   lt DataType DataType Date  gt  Public Property DOB As DateTime    Nothing   Your view code should be   Html EditorFor Function model  model DOB  New With   htmlAttributes   New With   class    form-control datecontrol    PlaceHolder    Enter Date of Birth       and voila

User · Answer

Checkout Shield UI s Date Picker for MVC  A powerful component that you can integrate with a few lines like     Html ShieldDatePicker        Name  datepicker

[asp.net-mvc] How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?

Examples related to asp.net-mvc

Examples related to twitter-bootstrap

Examples related to razor