In my ASP .NET MVC 5 app, I have a model class:
public class Event
{
public int Id { get; set; }
public string Name { get; set; }
[Display(Name = "Date")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
public DateTime Date { get; set; }
}
In my view I would like to have a date and time picker to be able to set event’s date and time in its Date property.
Currently I’m allowing to edit Date
using @Html.JQueryUI().DatepickerFor(model => model.Date)
in my view, however this only provides me with date picker, there is no hour/minutes to choose.
I’ve looked through forums and found this post and I would really like to make a use of bootstrap-datetimepicker, but I cannot manage to install and use it properly.
I installed NuGet package Bootstrap.DateTimePicker
and tried to put the sample code from here directly into my view:
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
but it only shows an empty blank textbox, date/datetime picker does not appear at all. I don’t even know how to bind this potential DateTimePicker to my model’s property Date.
I suppose I forgot about something, maybe including some scripts somewhere?
I’ve looked through the manual and net, but I cannot make it working…
In browser console i have:
ReferenceError: jQuery is not defined
jquery-ui-1.11.4.js:14 jquery-ui-1.11.4.js:6
ReferenceError: $ is not defined Error: Bootstrap’s JavaScript
requires jQuery
Edit:
I’m also attaching the contents of my _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/Content/jquery-ui.css"/>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - NOMU</title>
@Styles.Render("~/Content/css")
@*style for vertical tabs*@
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
@section Scripts {
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/globalize/globalize.js"></script>
<script src="~/Scripts/globalize/cultures/globalize.culture.@(System.Threading.Thread.CurrentThread.CurrentCulture.Name).js"></script>
<script>
$.validator.methods.number = function(value, element) {
return this.optional(element) ||
!isNaN(Globalize.parseFloat(value));
}
$(document).ready(function() {
Globalize.culture('@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)');
});
</script>
<script>
jQuery.extend(jQuery.validator.methods, {
range: function(value, element, param) {
//Use the Globalization plugin to parse the value
var val = Globalize.parseFloat(value);
return this.optional(element) || (
val >= param[0] && val <= param[1]);
}
});
$.validator.methods.date = function(value, element) {
return this.optional(element) ||
Globalize.parseDate(value) ||
Globalize.parseDate(value, "yyyy-MM-dd");
}
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'pt-BR'
});
</script>
}
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("HOME", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Members", "Index", "Members")</li>
<li>@Html.ActionLink("Addresses", "Index", "Addresses")</li>
<li>@Html.ActionLink("Departments", "Index", "Departments")</li>
<li>@Html.ActionLink("Events", "Index", "Events")</li>
<li>@Html.ActionLink("Payments", "Index", "Payments")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr/>
<footer>
<p>© @DateTime.Now.Year - Site Title</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@RenderSection("scripts", required: false)
</body>
</html>
EDIT 2015-12-05:
Thank you for trying to help, but I still cannot find the solution… I will try to provide as many details as possible.
Surely I’m integrating this into my solution bad, as if I create sample HTML file with the HTML code as @coderealm proposed below it of course works.
Ok, so without any datetime picker my view looks that way:
Here is the HTML code this view produces:
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<link rel="stylesheet" href="/Content/jquery-ui.css"/>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - Event</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HOME</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Members">Members</a></li>
<li><a href="/Addresses">Addresses</a></li>
<li><a href="/Departments">Departments</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Payments">Payments</a></li>
<li><a href="/Messages/Create">Send message</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Users & Roles</li>
<li><a href="/Account/Register">Create new user</a></li>
<li><a href="/Roles">Manage roles</a></li>
</ul>
</li>
</ul>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="esfmyOwwGOynXzXzmRDd8FnKUZX5pNVDXdpcZwtBEq4y5j1d9fPS-0ce2pemBsSi3Yp4l8NOWs5hXvgxQpQP3t-n-9V3P1SuvEurk2RCd9WJO9gilnBwQqgSll4F2WsGHR3NMNKFkrdZD0uy8lJQdw2" /> <ul class="nav navbar-nav navbar-right">
<li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello user@gmail.com <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Account</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
<li><a href="/Manage">Manage</a></li>
</ul>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Create</h2>
<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="ChQ9Bowi5lfzRdqywpBOd6DW8xX7EDm19zq0IL3f_MqTAjOXPlL6fiK-pLbdDeonHzsCQfWOEQ7lU3j-t1lCBpqGL7rOu1vlapqJpM2zUbcHGicp4QpaIvxrQpOihUlVy9qypWEHhuRHEHJ-Q--rkw2" /> <div class="form-horizontal">
<h4>Event</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Date">Date</label>
<div class="col-md-10">
<input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Place">Place</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Mandatory">Mandatory</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
<a href="/Events">Back to List</a>
</div>
<hr/>
<footer>
<p>© 2015 - Title</p>
</footer>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"841bbc2758464834b8d3ce225ba16e58"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
My field for Date
currently uses jquery DatePicker (in the view I just do @Html.JQueryUI().DatepickerFor(model => model.Date)
to make use of it) and it displays simple jquery calendar fine, but as I mentioned it’s not possible to choose hours. So I decided to use abovementioned bootstrap-datetimepicker, so I installed it from NuGet and:
- According to what @coderealm suggested, I put the
<head>
part of the sample code into my_Layout.cshtml
file to be common within all views. I put it just before the end of<head>
section: here (sorry for PasteBin, this message is too long already).
And just after pasting this code there when I reload my View it changes its look (it’s actually enough to paste only <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
in _Layout.csthml
file for this to happen):
As you can see, text fields are like smaller, titles are not bold now. BTW, my old jquery Datepicker still works fine at this moment, but I suppose it’s not OK that the view of these textboxes and generally the layout is changed. The HTML produced by the above view has now changed for the following one:
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<link rel="stylesheet" href="/Content/jquery-ui.css"/>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - Event</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">HOME</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Members">Members</a></li>
<li><a href="/Addresses">Addresses</a></li>
<li><a href="/Departments">Departments</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Payments">Payments</a></li>
<li><a href="/Messages/Create">Send message</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Users & Roles</li>
<li><a href="/Account/Register">Create new user</a></li>
<li><a href="/Roles">Manage roles</a></li>
</ul>
</li>
</ul>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="DuIycgdv9rnUap62YqrY4A0imdnNK99uk3sK_LNm8OFv2fj3PKnhDYAp1gr87Cke0r-EDSb2cZGhCoH3x8kcu0bU7GqCQQlHEvntgaRNsqU8rpRcJHzVY40LTk-S56i3OfWeJQGqsc7azegYEodNmw2" /> <ul class="nav navbar-nav navbar-right">
<li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello test@gmail.com <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Account</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
<li><a href="/Manage">Manage</a></li>
</ul>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Create</h2>
<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="a-m23Z2lGhcnMvAvJit74BPW2oqJFPsP9qQ4KjUASZobUsiYp5Q48K-rCR7ZjGm4GPD0dihBjBRuMmAVUiIM9qOjojMLFIQ2_X2i0EtgvGUY3OKVJ9BB_wzb8tcTTiN4wxURNAK1M2VDPKjLkjEDig2" /> <div class="form-horizontal">
<h4>Event</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Date">Date</label>
<div class="col-md-10">
<input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Place">Place</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Mandatory">Mandatory</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
<a href="/Events">Back to List</a>
</div>
<hr/>
<footer>
<p>© 2015 - Title</p>
</footer>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"3ca3ab4389224867b6caa3f9435eeb1d"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
- If I now put the
<body>
‘s part of the sample HTML code provided by @coderealm into myCreate.cshtml
view file (I put it just before the lastdiv
element which addsActionLink
to go back to theIndex.cshtml
within the same controller): here
It adds the new DateTimePicker, however after choosing the day and time it is stuck in this state:
and I’m not able to close this DatetimePicker, when I click somewhere it does not disappear. The HTML code it produced this time is (sorry I need to put this on PasteBin, as the message’s length is exceeded): here.
I hope someone will now be able to help me, as it’s already driving me crazy… I’m not originally web developer, so probably I messed something up within my views, maybe I load scripts not properly or something…
Once more – thank you in advance for your help!
2
Answers
I finally found the solution.
Regarding my original issue I still don't know what was happening it was not working, however I found another way :).
I decided to make a use of this JQueryUI DateTimePicker addon.
All you need to do to make it working (in my case with my
Date
field):Now it's the time to install jQueryUI datetimepicker addon, you have two possibilities:
A) Install it manually:
Download
section)jquery-ui-timepicker-addon.js
file into your solution'sScripts
folderjquery-ui-timepicker-addon.css
into your solution'sContent
folderB) Install using NuGet (I prefer this method):
In your
_Layout.cshtml
add:and:
This will provide you with that beautiful DateTimePicker:
Remember that this
name
parameter forinput
field is the name of the parameter which will be posted while you submit your form.I hope it helps someone in the future ;).
Thank you for all your time :).
Copy and paste this in a notepad editor and save it on disk as, name the file test.html. Now open test.html is a web browser and it works. Now follow this file to the later and implement in your solution