i want to show jquery datepickers on my datetime textboxes.
I created DateTime.cshtml file in Views/Shared/EditorTemplates add added this:
@model Nullable<System.DateTime>
@if (Model.HasValue)
{
@Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}", Model.Value), new { @class = "date" })
}
else
{
@Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}", ""), new { @class = "date" })
}
@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace(".", "_");
}
<reference path="jquery-1.4.4.js" />
<reference path="jquery-ui.js" />
<script type="text/javascript">
$(document).ready(function () {
$(".date").datepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
showOptions: {
origin: ["top", "left"]
}
});
});
</script>
Here is my view:
<td>
<div class="editor-label" >
@Html.LabelFor(model => model.Birthdate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Birthdate, null, new { @class = "date"})
@Html.ValidationMessageFor(model => model.Birthdate)
</div>
</td>
My model in entity ado model:
public Nullable<global::System.DateTime> Birthdate
{
get
{
return _Birthdate;
}
set
{
OnBirthdateChanging(value);
ReportPropertyChanging("Birthdate");
_Birthdate = StructuralObject.SetValidValue(value);
ReportPropertyChanged("Birthdate");
OnBirthdateChanged();
}
}
but it does not working i have added $(".date").click(function{alert('Clicked')}); in DateTime.cshtml but jquery does not alerting anything
thanks
Browser html
<!DOCTYPE html>
<html>
<head>
<title>Add Client - Lombard Admin Panel</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.js" type="text/javascript"></script>
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div id="top-bar">
<div class="page-full-width cf">
<ul id="nav" class="fl">
<li class="v-sep"><a href="#" class="round button dark ic-left-arrow image-left">მთავარი
საიტი</a></li>
<li class="v-sep"><a href="/home" class="round button dark home-left image-left">სახლი
</a></li>
<li class="v-sep"><a href="#" class="round button dark menu-user image-left">შესული
ხართ როგორც: <strong>acid</strong></a>
<ul>
<li><a href="#">ლომბარდის პროფილი</a></li>
<li><a href="#">პარამეტრები</a></li>
<li><a href="#">პაროლის შეცვლა</a></li>
<li><a href="/logout">გასვლა</a></li>
</ul>
</li>
<li><a href="#" class="round button dark menu-email-special image-left">3 ახალი შეტყობინება</a></li>
<li><a href="#" class="round button dark menu-logoff image-left">გასვლა</a></li>
</ul>
</div>
</div>
<div id="header-with-tabs">
<div class="page-full-width cf">
<a href="#" id="company-branding-small" class="fr">
<img src="/Content/images/company-logo.png" alt="Blue Hosting" /></a>
</div>
</div>
<div id="content">
<div class="page-full-width cf">
<div class="side-menu fl">
<h3>
მთავარი მენიუ</h3>
<ul>
<li><a href="#">დამატება/რედაქტირება</a>
<ul>
<li><a href="#">ფილიალები</a></li>
<li><a href="/client">კლიენტები</a></li>
<li><a href="#">მომხმარებლები</a></li>
<li><a href="details.aspx">კომპანიის დეტალები</a></li>
</ul>
</li>
<li><a href="#">საწყობი</a></li>
<li><a href="#">შემოსავლები</a></li>
<li><a href="#">გაყიდვების ისტორია</a></li>
<li><a href="#">ანალიზი</a></li>
</ul>
</div>
<div class="side-content fr">
<div class="content-module">
<div id="render-body">
<h1>
ახალი კლიენტის დამატება</h1>
<br />
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<form action="/client/Create" method="post"> <table>
<tr>
<td>
<div class="editor-label">
<label for="Firstname">სახელი</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Firstname" name="Firstname" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Firstname" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Lastname">გვარი</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Lastname" name="Lastname" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Lastname" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="IsMale">სქესი</label>
</div>
<div class="editor-field">
<select class="list-box tri-state" id="IsMale" name="IsMale"><option selected="selected" value="">Not Set</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
<span class="field-validation-valid" data-valmsg-for="IsMale" data-valmsg-replace="true"></span>
</div>
</td>
<td>
<div class="editor-label" >
<label for="Birthdate">დაბადების თარიღი</label>
</div>
<div class="editor-field">
<input class="date" id="Birthdate" name="Birthdate" type="text" value="" /><reference path="jquery-1.4.4.js" />
<reference path="jquery-ui.js" />
<script type="text/javascript">
$(document).ready(function () {
$(".date").click(function{
alert('Boo')
});
$(".date").datepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
showOptions: {
origin: ["top", "left"]
}
});
});
</script>
<span class="field-validation-valid" data-valmsg-for="Birthdate" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="PrivateNumber">პირადი ნომერი</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="PrivateNumber" name="PrivateNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PrivateNumber" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Address">მისამართი</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Address" name="Address" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address" data-valmsg-replace="true"></span>
</div>
</td>
<td>
<div class="editor-label">
<label for="Phone1">ტელ. 1</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Phone1" name="Phone1" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Phone1" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Phone2">ტელ. 2</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Phone2" name="Phone2" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Phone2" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Email">ელ-ფოსტა</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Email" name="Email" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</td>
</tr>
</table>
<br />
<p>
<input type="submit" value="დამატება" class="button round blue image-right ic-add text-upper" />
</p>
</form><div>
<a href="/client">უკან დაბრუნება</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>
© Copyright 2012 <a href="#">Acid Labs 2011</a>. All rights reserved.</p>
<p>
<strong>Lombard Admin Panel </strong>V 1.0 <a href="http://www.acidlabs.ge">Acid Labs</a></p>
</div>
</div>
</body>
</html>
You have a number of problems. First, you need to get rid of the reference tags in your template, they aren’t legal. That’s not how you use reference tags.
Second, You don’t want to include the script tag, because otherwise if you have more than one DateTime on the page, it will execute the code multiple times.
Next, you can’t do this:
Editor Templates do not take html attributes. You’re also specifying a null template, (the second parameter) so it’s not using any template at all, even though your template is named DateTime.cshtml, this overrides the template selection.
Just do this:
Also, get rid of the global:: in the type definition of your property, and instead make sure you include System in the using list. Not sure if the global:: will interfere with type resolution.