I've been using kendo ui for asp.net mvc 3 and I'm having some problems whit datepickers
the problem is that my datepickers renders a simple input date instead od the gorgeous controls
here is my code
<table class="table-container">
<tr>
</td>
<td class="item-value">
#(Html.Kendo().DatePickerFor(model => model.paymentDueDate)
.Name("datepicker")
.Value(DateTime.Now.ToShortDateString())
.HtmlAttributes(new { type = "text" })
)
</td>
</tr>
</table>
and in the header the next
<link media="screen" type="text/css" href="/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link media="screen" type="text/css" href="/kendo/styles/kendo.default.min.css" rel="stylesheet">
<link media="screen" type="text/css" href="/kendo/styles/kendo.rtl.min.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/kendo.datepicker.min.js">
<script type="text/javascript" src="/Scripts/kendo.aspnetmvc.min.js">
<script type="text/javascript" src="/Scripts/kendo.web.min.js">
I also added the reference to kendo.Mvc.dll
and that renders a simple input date
here is the code I got in firefox after running the application
<input id="datepicker" type="text" value="11/07/2013" name="datepicker" class="valid">
I havent found anything about that
am I missing some css or js?
please help this is getting me crazy
thanks in advance
Are you including jQuery? Before any other JS you should include jQuery:
<script type="text/javascript" src="/Scripts/jquery.min.js">
Related
i'm trying to create date picker like this in asp.net, but its throwing me error. I'm using MVC architecture to create.
Here is the code i'm using. i'm getting error as:
Microsoft JScript runtime error: Object doesn't support this property
or method
I need date to be selected and sit in the edittext.
<tr>
<td style="width: 450px" class="" height="40px">
<%= Html.TextBox(ViewControlNames.DateTime, "", new { maxlength = "40", id = ViewControlNames.DateTime, Class = "LongInputField" })%>
</td>
</tr>
<script>
$(function () {
$("#CabDateTime").datepicker();
});
</script>
</asp:Content>
Probably you have not included the necessary jQuery UI library.
Add these script tags inside your page AFTER jQuery:
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />
<script src="js/jquery-ui.custom.min.js"></script>
In this way you'll have the jQuery UI widgets bound to jQuery.
Ref: https://learn.jquery.com/jquery-ui/getting-started/
If you need a datetimepicker; you can use a widget plugin that extends datepicker functions by adding a time selection.
Project site: http://trentrichardson.com/examples/timepicker/
Demo code:
$(document).ready(function () {
$('#timePicker').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm ss'
});
});
Demo: http://jsfiddle.net/IrvinDominin/Ljt4T/1/
Have you added?
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
See from your comments you don't seems to be have added libraries and api at top of the page plese check it like i posted here
And for the further documentation please check here http://jqueryui.com/datepicker/
I am trying to highlight c-sharp with Code Mirror. Everything but the syntax highlight works. I am using .ASPX pages to delivery the content.
<asp:TextBox runat="server" ID="codeBox" TextMode="multiline" Rows="30" Width="1000"></asp:TextBox>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(
document.getElementById("MainPagePlaceholder_codeBox"),
{ lineNumbers: true, matchBrackets: true, mode: "text/x-csrc" }
);
</script>
I have the following stylesheets added:
<link href="codemirror.css" rel="stylesheet" type="text/css"/>
<link href="neat.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/mirror/clike.js"></script>
<script src="/Scripts/mirror/codemirror.js"></script>
<script src="/Scripts/mirror/matchbrackets.js"></script>
I figured it out. I was able to resolve this issue: codemirror.js needs to be first before clike.js.
I have model created with data annotations and in the partial view form when I click on submit client side validations does not work and form gets posted to the server. I am breaking my head over this from last couple of days. Following is the head section in _Layout.cshtml where I have included all the scripts
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link href="~/Images/yellowtribe3.png" rel="shortcut icon" type="image/x-icon" />
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/YellowTribes.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/menu3.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/shCore.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/shThemeDefault.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/prettify.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<meta name="viewport" content="width=device-width" />
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.4.min.js")"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = true;
$.extend($.mobile, { ajaxFormsEnabled: true });
});
</script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
And following is the partial view code where I have inputs
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td align="right" width="15%">
<div>Name:</div>
</td>
<td align="left">
<div class="input200">
<div class="input200">#Html.EditorFor(x => x.Name, new { #maxlength = "25" })</div>
</div>
</td>
</tr>
<tr>
<td align="right" valign="top">
<div>Comment:</div>
</td>
<td align="left">
<div>#Html.TextAreaFor(x => x.CommentText, 5, 50, null)</div>
</td>
</tr>
<tr>
<td></td>
<td>
#Html.Raw(Html.GenerateCaptcha())
#Html.ValidationMessage("recaptcha")
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<input id="ArticleID" name="ArticleID" type="hidden" value="#ViewData["ArticleID"].ToString()" />
<input class="actionButtons" type="submit" value="Submit" onclick="validateInput();" formmethod="post"/>
<div id="thanksMsg" style="display:none; color:Red;">
<b>Thank you for your comment...</b>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<br /> <br />
</td>
</tr>
</table>
If I view the source of my web page it seems to look fine with validations
<div class="input200"><input class="text-box single-line" data-val="true" data-val-required="Please enter your name" id="Name" name="Name" type="text" value="" /></div>
</div>
<div><textarea cols="50" data-val="true" data-val-required="Please enter comments" id="CommentText" name="CommentText" rows="5">
Not sure why it just won't validate when I leave these fields empty. Any help greatly appreciated.
I finally found the issue. The problem was with the way I have included javascripts scripts.
I changed following order
from
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
To
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
Can you post your model code?
I did something really silly the other day that kept me stuck for a little while, I hadn't declared my properties correctly, I just created public strings instead of a property with a set and get method. Everything worked just fine when using the model except for the model binding and validation. It was driving me nuts, maybe you've made the same mistake?
Anyone know what the easiest way to implement a date/time picker in bootstrap/razor html code is? I currently have the program running fine by entering directly as:
<div class="editor-label">
#Html.LabelFor(model => model.date)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.date)
#Html.ValidationMessageFor(model => model.date)
</div>
But would love a date/time picker to popup when date is selected? Any suggestions?
Simplicity is key here as the code is for some basic students to see.
EDITED but not working:
My new head, still not working:
<meta charset="utf-8">
<title>App Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="#Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet">
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#date").datepicker();
});
</script>
jQuery UI Datepicker
http://jqueryui.com/datepicker/
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#date" ).datepicker();
});
</script>
</head>
Update:
The #date refers to the name in your model. If you need to add other datepickers, just make sure to change #date to the new property name
I use Calendar control from AjaxControlToolkit library and is very good. You have every thing how to implement it in this link:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx
With MVC you may want to checkout the following post.
All the date or date/time fields just work regardless of thier field name in your model.
http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx
How do i include jquery ui to be used in my system? I've already put the code in my header:
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
And how can I include the date picker which I already downloaded from jqueryUI. Here is the code of the date picker :
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo"><p>Date: <input type="text" id="datepicker"></p></div>
I got confused how to export the downloaded file to asp. Thank you.
Did you also include the references to JQuery?
<link type="text/css" href="css/themename/jquery-ui-1.8.23.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
See: JQuery UI Documentation