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

sing the Razor engine? - Stack Overflow

How to add Date Picker Bootstrap 3 on MVC 5 Ask Question

project using the Razor engine?

I need some guide lines on how to

install a Date Picker Bootstrap 3 on a
72 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
34
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")

<script type="text/javascript">
$('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

Now, how to call the date picker

here?

<div class="form-group input-group-sm">

@Html.LabelFor(model => model.DropOffDate)
@Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control",
placeholder = "Enter Drop-off date here..." })
@Html.ValidationMessageFor(model => model.DropOffDate)
</div>

asp.net-mvc twitter-bootstrap razor

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
Terms of Service. edited Dec 11 '14 at 5:55

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 1/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow
Dhaust
4,116 7 47 69

asked Jan 14 '14 at 1:36

Ben Junior
941 5 22 32

Please show us your cshtml/Razor

code you are working with that does
not work. Thanks – Eric Bishard Jan
14 '14 at 2:00

Thanks for the reply. I've updated my

post accordingly – Ben Junior Jan
14 '14 at 2:25

I'll fire up VS and see if I can figure it

out! – Eric Bishard Jan 14 '14 at 2:29

Did you use NuGet to add the files or

did you add them manually ? –
Mehdiway Jul 9 '15 at 14:24

waqar ahmed is by far the simplest

solution. – Dieglock Jul 18 '16 at
15:59

9 Answers

This answer uses the jQuery UI

Datepicker, which is a separate
74 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 :

<div class="form-group input-group-sm

@Html.LabelFor(model => model.Dro
@Html.TextBoxFor(model => model.D
datepicker", placeholder = "Enter Dro
@Html.ValidationMessageFor(model
</div>

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:

<script type="text/javascript">
$(function () { // will trigger w
$('.datepicker').datepicker();
});
</script>

By using our site, you acknowledge

edited Aug that
9 '17you have read and understand our Cookie Policy, Privacy Policy, and our
at 14:16
Terms of Service. Jess
13.5k 10 86 118
https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 2/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow

answered Jan 14 '14 at 2:36

Karhgath
1,649 11 10

2 Yeah this is exactly how I have my

code right now and it's not working –
Eric Bishard Jan 14 '14 at 3:02

1 This is why I use Foundation! I have

the same thing you do, I tried '@class
= "form-control datepicker"' & '@class
= "datepicker form-control"' and no
dice – Eric Bishard Jan 14 '14 at 3:07

3 If, by any chance, you are calling it in

a partial view, the script must be in
the Index page or it won't work if it is
the partial view. This was also one of
the problems fixed – Ben Junior Jan
14 '14 at 22:27

Can I automate Razor so that if there

[DataType(DataType.Date)] is
defined on a field it should
automatically add the datepicker
css class and run the js? – Shimmy
Mar 15 '15 at 3:22

1 The MVC 5 templates I have in Visual

Studio 2015 don't include JQuery UI
so I'm pretty sure you have to install
and reference that first before this will
work. There's a decent discussion
here with links to related tutorials:
forums.asp.net/t/… – Paul Angelno
Mar 22 '17 at 19:49

This answer simply applies the

type=date attribute to the HTML
input element and relies on the
49
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
Public DateTime Ldate {get;set;}
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
Terms of Service.

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 3/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow

Assuming you're using MVC 5 and

Visual Studio 2013.

edited Aug 9 '17 at 14:44

Jess
13.5k 10 86 118

answered Jul 31 '14 at 17:52

Keagz93
583 4 8

2 This is THE BEST answer! Is there

any way to pick the time and date?
[DataType(DataType.DateTime)]
public DateTime BirthDate { get;
set; } didn't work for me. – Yoda
Sep 10 '14 at 12:17

1 The simplest solution is here – piavgh

Oct 26 '14 at 14:06

25 That is NOT the correct answer! That

solution will only enable browser
specific calendars appear on the
browser for date fields. That has
nothing to do with Bootstrap Datetime
plugin. – ilter Oct 28 '14 at 8:55

3 This will not working with IE 11 and

FF 38. Only Chrome will pick this up.
– immirza Feb 8 '17 at 7:36

1 Pfff, chrome only solution, until every

browser has it's own datepicker –
Antoine Pelletier May 1 '17 at 18:02

I hope this can help someone who

was faced with my same problem.
17 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()

});
By using our site,}you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
Terms of Service.

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 4/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow

Set the bundles

bundles.Add(New ScriptBundle("~/bundl
"~/Scripts/bootstrap.js
"~/Scripts/bootstrap-da
"~/Scripts/DatePickerRe
"~/Scripts/respond.js")

bundles.Add(New StyleBundle("~/Conten
"~/Content/bootstrap.cs
"~/Content/bootstrap-da
"~/Content/site.css"))

Now set the Datatype so that when

EditorFor is used MVC will identify
what is to be used.

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = No

Your view code should be

@Html.EditorFor(Function(model) model
= "form-control datecontrol", .PlaceH

and voila

edited Aug 9 '17 at 14:40

Jess
13.5k 10 86 118

answered Nov 10 '14 at 18:19

Enzero
780 1 15 31

P.S. - Set the bundles in

BundleConfig.cs file in App_Start
folder. – Amit Mar 17 '16 at 21:45

Where do you update the part that

reads <Required>
<DataType(DataType.Date)> Public
Property DOB As DateTime? =
Nothing – Alan Nov 19 '16 at 13:50

This appears to be VB.NET, for those

tearing their hair out. Tried to convert
it to
By using our site, you c# but no matter
acknowledge whathave
that you I tried it did
read and understand our Cookie Policy, Privacy Policy, and our
nothing. – SteveCav Aug 14 '17 at
Terms of Service.
22:52

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 5/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow

Yep, same here - couldn't make it

work for C#. – noelicus Jan 22 '18 at
21:21

Add just these two lines before the

datetime property in your model
13
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0

and result will be :

edited Feb 8 '17 at 10:10

Owen Pauling
6,128 11 36 47

answered May 28 '15 at 7:12

waqar ahmed
169 1 6

But will you use in the View? I tried

TextBoxFor but it's still a textbox –
Harambe Attack Helicopter Sep 27
'16 at 5:37

This method only works in some

browsers like, chrome. – Kazem Oct 2
'16 at 5:15

IE will fail your solution ! – immirza

Feb 8 '17 at 7:42

Attempting to provide a concise

update, based on Enzero's answer.
6 Install the Bootstrap.Datepicker
package.

PM> install-package Bootstrap.Dat

...
Successfully installed 'Bootstrap

In AppStart/BundleConfig.cs, add
the related scripts and styles in
the bundles.
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
Terms of Service. bundles.Add(new ScriptBundle("~/b
//...,

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 6/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow
"~/Scripts/bootstrap-datepi
"~/Scripts/locales/bootstra

bundles.Add(new StyleBundle("~/Co
...,
"~/Content/bootstrap-datepi

In the related view, in the scripts'

section, enable and customize
datepicker.

@section scripts{
<script type="text/javascript
//...
$('.datepicker').datepick
format: 'dd/mm/yyyy',
language: "YOUR-LOCAL
orientation: 'left bo
});
</script>

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-TH
})

edited Feb 12 '18 at 10:03

answered Jan 5 '18 at 11:42

stefaleon
61 1 8

Hi, how do you make this a date

range, i.e. user needs to pick two
dates from & to – transformer Jan 9
'18 at 6:29

[DataType(DataType.Date)]
public DateTime BirthDate { get; set;
4
decorate your model like this. can use
a bootstrap date time picker I used
this one.
https://github.com/Eonasdan/bootstra
p-datetimepicker/

I suppose you already have bundles

for bootstrap css and js

Your
By using our site, you date picker bundle
acknowledge that youentries
have read and understand our Cookie Policy, Privacy Policy, and our
Terms of Service.

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 7/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow

bundles.Add(new ScriptBundle("~/bund
"~/Scripts/moment.min.js",
"~/Scripts/bootstrap-datet

bundles.Add(new StyleBundle("
"~/Content/bootstrap

Render bundles on your Layout View

@Styles.Render("~/Content/datepicker"
@Scripts.Render("~/bundles/datePicker

Your HTML in view

<div class="form-group">
@Html.LabelFor(model => model
col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model =>
form-control" })
@Html.ValidationMessageFo
"text-danger" })
</div>
</div>

At the end of your view add this.

<script>
$(document).ready(function () {
$('.datetimepicker').datetime
format: 'lll'
});
});
</script>

edited Dec 7 '15 at 21:13

answered Nov 24 '15 at 19:14

dnxit
4,918 2 19 27

1 Please consider that the input type

"date" (set by Datatype.Date) is only
supported by Chrome, Safari and
Opera right now (as you can see here:
w3schools.com/html/html_form_input_
types.asp). – leiseliesel Dec 7 '15 at
14:32

1 @leiseliesel I've updated the answer

with usage of a bootstrap date time
picker. – dnxit Dec 7 '15 at 21:11

1.make sure you ref jquery.js at first

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
2.check layout,make sure you call
Terms of Service.
3 "~/bundles/bootstrap"
https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 8/9
29/5/2019 asp.net mvc - How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine? - Stack Overflow

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(){...});

answered Jan 14 '14 at 3:25

chenZ
848 4 15

Checkout Shield UI's Date Picker for

MVC. A powerful component that you
-1 can integrate with a few lines like:

@(Html.ShieldDatePicker()
.Name("datepicker"))

answered Oct 31 '16 at 17:20

Vladimir Georgiev
1,857 19 24

Simple:

-2 [DataType(DataType.Date)]
Public DateTime Ldate {get;set;}

answered Jul 19 '16 at 19:39

GODFATHER
1 3

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
Terms of Service.

https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine 9/9