I have a jquery datepicker in an asp.net web form, it is working but has no style at all, I can only see the numbers floating over the page.
I have the following scripts in the master page:
<script src="Scripts/jquery-ui-1.11.3.min.js" type="text/javascript"></script>
I included the jquery-ui using nuget, so I have the themes very similar to
The date picker is associated to the control:
<div>Date: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> </div>
With the script:
$(document).ready(function() {
$("#<%=txtDate.ClientID%>").datepicker({ dateFormat: 'd/m/yy' });
});
The result is as I mentioned early the calendar without any style.
What I am missing to have the datepicker with some style (theme)?
Thank you
Here's what I have referenced. The datepicker works fine - apart from when you mouseover the arrows and the little white triangle goes gray - and can't be seen. Must have a little graphic missing I guess.
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css"/>
<script type="text/javascript" src="js/jquery-ui.js"></script>
thanks to #Martin Smellworse advice, based on the the files in my project I included:
<link href="Content/themes/base/all.css" rel="stylesheet" type="text/css" />
And worked
Related
I have some libraries, but when i try to inspect or debug i always get this annoying misconflict jquery libraries. The problem is stating must use latest of Bootstrap version 4.00 not less. This happens every time i want to use Datepicker
$(function() {
$("#checkbox").datepicker({
dateFormat: "yy-mm-dd"
}).val()
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type='text' id='checkbox' />
I am now getting a warning here yet not all my bootstrap buttons now seem to be working, what could i be missing or did?
I have a Form project that use DateTimePicker and I have to include those components into asp.net aspx webapp.
So I'm trying to include a DateTime Picker on asp.net webform but I can't.
I'm not an expert with aspx so maybe it's really a simple question.
I only see calendar in toolbox but not DateTimePicker.
The one I want to use is
System.Windows.Forms.DateTimePicker
could it be possible to include it into asp.net project?
You can use something like below on the Calender Click Method:
DateTime date = Convert.ToDateTime(calendar.SelectedDate.ToString());
Here calendar is the ID of your calendar control!
Hope this helps.
Because it'is a web application i could just use JQuery UI
http://jqueryui.com/datepicker/#inline
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display inline</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<form runat="server" id="form1">
Date: <div id="datepicker"></div>
</form>
</body>
</html>
Here is a full API description http://api.jqueryui.com/datepicker/
May be this can help you as an alternative to do this also !\
There is also an Ajax library for .NET. you can try also: http://www.codeproject.com/Tips/407460/How-to-use-ASP-NET-AJAX-Calender-Extender
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 am trying to write an MVC.NET web-site and I want to use the datepicker component from jQuery. To use jQuery I am using the following code on my Layout page:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/jquery.ui.all.css")" type="text/css" />
<link href="#Url.Content("~/Content/jquery.ui.datepicker.css")" type="text/css" />
</head>
On the page where I want to use datepicker I use the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#FromDate").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
...
<div class="editor-field-search">
<label for="fromDate">From date:</label>
<input type="text" id="FromDate" name="FromDate" value=""/>
</div>
But datepicker is displayed in a weird way:
I've Googled and tried to fixed, but have not find a way to fix my problem. What am I doing wrong?
It's a pure CSS reference problem. You don't have the CSS referenced correctly. Run my sample Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC and use the F12 tools and compare with your code to figure out why your CSS is not being used. – Rick.Anderson-at-Microsoft.com
comment out my CSS reference and you get the same malformed calendar. The F12 tools are great for figuring this out.
if you are copy paste your source code here I think you are missing a ">"
<label for="fromDate">From date:</label**>**
<input type="text" id="FromDate" name="FromDate" value=""/>
Does it work if you close the label tag?
<label for="fromDate">From date:</label>
^
I'm assuming you have downloaded a theme from jQuery's ThemeRoller...could try a couple things:
Use the jQuery and jQuery UI Javascript versions included in the download to
make sure it is compatible (in js directory of download). Looks
like jQuery 1.7.1 is the latest version included in jQuery UI
download and you have jQuery 1.7.2 on your page.
Try the jQuery UI css file in the css\custom-theme directory - it includes all the css needed for all the jQuery components. Also
check to make sure the images were copied next to the jQuery css
file in your application like it is in the custom-theme directory.
jQuery Getting Started Guide