here is my script
<script type="text/javascript">
$(document).ready(function () {
// alert("jquery working fine, still no display..");
$(".datepicker").datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yyyy'
});
});
</script>
<input type="text" class="datepicker" />
The actual Datepicker works great, firebug shows this script, the jqueryUI, the timepicker-addon.js, slider.js, and datepicker.js, jquery is selecting the textboxes.
but alas, still no datetimepicker displaying
I've tried using id's/classes, rearranging the order the scripts are loaded. I would say that the addon is just bunk, but so many seem to have no troubles at all with it.
Does anyone know what I am missing?
The following code works perfectly fine for me:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" class="datepicker" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$('.datepicker').datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yy'
});
</script>
</body>
</html>
Gives the following result as can be seen in this live demo:
So I guess there must be something wrong with your script inclusions and maybe their order. Unfortunately since you haven't shown your code it is difficult to be able to say more.
Related
I want to update the data in my container with ajax data from a partial view but the page just reloads without errors and doesn't update the data. Please help me with advice.
Its my controller code
public class HomeController : Controller
{
public ActionResult OnGetPartial()
{
return PartialView();
}
}
Its my PartialView code
<p>Hello from the Hello World partial at #DateTime.Now</p>
its my index and _layout code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - IntegTest</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
#RenderBody()
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
Index
Click Here!
<div id="panel">
</div>
<script>
completed = function (xhr) {
alert('hi ${xhr.responseText}!');
}
failed = function (xhr) {
alert('Status: { xhr.status }, Status Text: { xhr.statusText}');
}
</script>
You need to use jQuery Unobtrusive AJAX library , it can be find in Github :
https://github.com/aspnet/jquery-ajax-unobtrusive
You can download the file from above link(in src folder) or install it from Nuget in VS . Then you need to link the file in your _layout page :
<script src="~/lib/jquery-validation-unobtrusive/jquery.unobtrusive-ajax.js"></script>
After that your code should works well . In addition , you should ensure you have set correct partial view name . If you are using Razor pages , you can refer to this article for detail code sample .
I have copied this code from a website http://www.aspdotnet-suresh.com/2012/04/jquery-dropdownlist-selection-for.html and its not showing me the desired output, I'm Naive at this but the calendar is not visible below the textbox which should as per the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1970:2012'
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
You can also set up calendar by using ajax calendar extender..
<asp:CalendarExtender ID="txtDate_CalendarExtender" runat="server"
Enabled="True" TargetControlID="txtDate" Format="dd/MMM/yyyy">
</asp:CalendarExtender>
As per you First statement you copied the code so check that your application contain js folder or not
Make sure that your website project includes the reference files in your project
css/ui-lightness/jquery-ui-1.8.19.custom.css
js/jquery-1.7.2.min.js
js/jquery-ui-1.8.19.custom.min.js
If not you can download the same from jquery site and include same in your project or provide http path for reference files
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/
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