Could someone attach a simple sample application which demonstrates how to use datepicker in @Html.EditorFor field ? I have read several other threads where editor templates were suggested but I cannot integrate this approach in my application. It seems
that I am missing something. Maybe the version of the JQuery that I am using ... or I cannot make my @Html.EditorFor field to apply the editor template ...
first of all, why can't you make use of an EditorTemplate? It's nothing more than a subfolder named as such which holds views like under the Views folder. Nothing new under the sun there so simply go for that and make your life easier in the end.
Second: provide the code of what you're trying to do in an isolated way so that we can actually take a look at it and help you to improve it.
Simply make it like this in your page:
@Html.TextBoxFor(x => x.Date, new { @class="datepicker" })
And in the javascript part of the page:
$(function({
$('.datepicker').datepicker();
});
Make sure you have both jQuery and jQueryUI referenced in your page. You'll need both scripts and the CSS of jQueryUI as well in order to get this to work.
Grz, Kris.
Read my blog | Twitter Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
Marked as answer by janko89 on Nov 11, 2012 08:20 PM
if you check the generated html, does it look correct in your eventual page?
The working part and the non working part are both on the same page? If not then try that as you might've forgot to include the needed scripts and css on the other page.
Grz, Kris.
Read my blog | Twitter Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
if you would've taken a closer look to my first reply then you would''ve seen that that it's .datepicker, not #datepicker. You need to provide the class attribute and then make the jQuery selector based on that class.
So change $("#datepicker").datepicker(); to $(".datepicker").datepicker();
janko89
For this : <p>Date: <input type="text" id="datepicker" /></p> the datepicker appears.
Indeed as your jQuery selector is on the id and you set the id of the input field to datepicker.
Grz, Kris.
Read my blog | Twitter Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
Marked as answer by janko89 on Nov 11, 2012 08:18 PM
janko89
Member
3 Points
9 Posts
DatePicker editor in MVC3
Nov 09, 2012 07:49 PM|LINK
Hello,
Could someone attach a simple sample application which demonstrates how to use datepicker in @Html.EditorFor field ? I have read several other threads where editor templates were suggested but I cannot integrate this approach in my application. It seems that I am missing something. Maybe the version of the JQuery that I am using ... or I cannot make my @Html.EditorFor field to apply the editor template ...
Thank you in advance.
XIII
All-Star
182684 Points
23455 Posts
ASPInsiders
Moderator
MVP
Re: DatePicker editor in MVC3
Nov 10, 2012 11:48 AM|LINK
Hi,
first of all, why can't you make use of an EditorTemplate? It's nothing more than a subfolder named as such which holds views like under the Views folder. Nothing new under the sun there so simply go for that and make your life easier in the end.
Second: provide the code of what you're trying to do in an isolated way so that we can actually take a look at it and help you to improve it.
Simply make it like this in your page:
@Html.TextBoxFor(x => x.Date, new { @class="datepicker" })And in the javascript part of the page:
$(function({ $('.datepicker').datepicker(); });Make sure you have both jQuery and jQueryUI referenced in your page. You'll need both scripts and the CSS of jQueryUI as well in order to get this to work.
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
janko89
Member
3 Points
9 Posts
Re: DatePicker editor in MVC3
Nov 10, 2012 01:28 PM|LINK
Hi Kris,
Thank you for your feedback. I have tested the code from the following link : http://jqueryui.com/datepicker/
and everything goes right. I can use the DatePicker with 'input' but I cannot make it work with 'EditorFor' using :
@Html.TextBoxFor(x => x.Date, new { @class="datepicker" })This is my current code not working code :
<div class="editor-label"> @Html.LabelFor(model => model.StartTime) </div> <div class="editor-field"> @Html.EditorFor(model => model.StartTime, new { @class = "datepicker" }) @Html.ValidationMessageFor(model => model.StartTime) </div>XIII
All-Star
182684 Points
23455 Posts
ASPInsiders
Moderator
MVP
Re: DatePicker editor in MVC3
Nov 10, 2012 06:57 PM|LINK
Hi,
if you check the generated html, does it look correct in your eventual page?
The working part and the non working part are both on the same page? If not then try that as you might've forgot to include the needed scripts and css on the other page.
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
janko89
Member
3 Points
9 Posts
Re: DatePicker editor in MVC3
Nov 11, 2012 05:36 PM|LINK
Hello,
This is the generated html :
The code in my view is :
<h2>Create New Work Item</h2>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>WorkCard</legend>
<div class="editor-label">
@Html.LabelFor(model => model.StartTime)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.StartTime, new { @class = "datepicker" })
@Html.ValidationMessageFor(model => model.StartTime)
</div>
In the _Layout.cshtml I have :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
...
For this : <p>Date: <input type="text" id="datepicker" /></p> the datepicker appears. It does not apperat for EditorFor.
It seems that I am missing something but I do not know what :(
If would be great if you provide me which steps what exactly to do one by one or make a small project where your approach is shown.
Thank you for your attention.
XIII
All-Star
182684 Points
23455 Posts
ASPInsiders
Moderator
MVP
Re: DatePicker editor in MVC3
Nov 11, 2012 06:26 PM|LINK
Hi,
if you would've taken a closer look to my first reply then you would''ve seen that that it's .datepicker, not #datepicker. You need to provide the class attribute and then make the jQuery selector based on that class.
So change $("#datepicker").datepicker(); to $(".datepicker").datepicker();
Indeed as your jQuery selector is on the id and you set the id of the input field to datepicker.
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
janko89
Member
3 Points
9 Posts
Re: DatePicker editor in MVC3
Nov 11, 2012 08:22 PM|LINK
Thank you very much. You are great.
Thank you for your patience.