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
