In the webform with sitemaster, i couldnt use the function of pikaday,but in the new webform i created for testing without sitemaster i could use the function. How do i solve the problems?
With sitemaster:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script>
var picker = new Pikaday({
field: document.getElementById('TextBox1'),
firstDay: 1,
format: 'YYYY-MM-DD',
minDate: new Date('2015-01-01'),
maxDate: new Date('2050-12-31'),
yearRange: [2015, 2050],
numberOfMonths: 1,
});
</script> </asp:Content>
Without sitemaster:
<body>
<form id="form1" runat="server">
<div>
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script>
var picker = new Pikaday({
field: document.getElementById('TextBox1'),
firstDay: 1,
format: 'YYYY-MM-DD',
minDate: new Date('2015-01-01'),
maxDate: new Date('2050-12-31'),
yearRange: [2015, 2050],
numberOfMonths: 1,
});
</script>
</div>
</form> </body>
i have exactly the same problem and after doing research I found out the following: it seems that there's a css property that needs to be changed on the pikaday.css file, specifically on line 35:
.pika-single.is-bound{position: absolute !important}
Just add the !important next to the "position: absolute" statement.
Also in your javascript you have to reference the textbox like this:
var $txtDate = $("[id$=Client_Id_Generated_by_Aspx_page]")
This selector will find the reference of the textbox ID that you assigned on the ASPX page on your IDE (for example Visual Studio) at the end, according to the "$=" operator. This applies for .Net Frameworks 3.5 or less since it seems that on .Net Framework 4.0 or more there is a way to assign a ClientID on the server side for you to use it on the frontEnd (.js files for example).
I hope this will help you.
Cheers...
Related
I don't see any date picker in ASP.NET controls.
Anyone knows how to add it in my my webpage.
I am using VB as my programming language.
Result
I would like to thank everyone who posted the solutions, code and links which helped me to achieve this thread goal. Based on all of the source the below code is the one which works nicely.
Content1
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
And in
Content2
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
Add this inside your [head] Tag.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
and use this jquery function in aspx page inside [script] tag
$(function () {
$("#datepicker").datepicker();
$("#datepicker").change(function () {
$('#btnRefresh').click();
});
and add one textbox for display selected date. and button for getting the date in sever side. like this code
<input type="text" id="datepicker" runat="server" clientidmode="Static" />
<asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" ClientIDMode="Static"
Text="Refresh" AutoPostback="true" style="display:none;"/>
use this onclick event to do want you want..
You're right, there isn't anything built-in.
Personally I would recommend the jQueryUI datepicker - it's reliable and flexible, and it's javascript based, so it doesn't matter what your server-side language is.
See https://jqueryui.com/datepicker/
Once you've added the required references to jQuery and jQueryUI, in your aspx page, add a script section like this:
<script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
and then add the "datepicker" class to any textbox controls on the page where you want to use the datepicker:
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
P.S. I can also recommend most of the rest of the jQueryUI package, there are some useful items in there which can speed up your development time and make your apps look nicer and be more usable.
You can implement a datepicker on your page with the help of the Calendar control, using javascript on your page. Try this links for simple methods to do it:
http://www.vbknowledgebase.com/?Id=150&Desc=ASP.Net-DatePicker-using-Calendar-Control
http://www.codedigest.com/Articles/ASPNET/247_DatePicker_Control_in_ASPNet.aspx
http://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx
This is my JS for the datepicker.
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
This is my asp server side control.
<asp:TextBox ID="txtage" runat="server" ReadOnly="true"></asp:TextBox>
I want when user reach on this textbox then one calender should open from which they can select age and that date should display into this textbox.
Please tell me how can i do this?
You have several problems. Your ID doesn't match. You're using txtage in one place and txtcity in another. Is that a copy paste error?
If you're using nested templated controls (or a master page), your ID's on the client side are likely different than on the server side. You can change how the ID's on the client side are generated like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
<td><asp:TextBox ID="txtage" runat="server" ClientIdMode="static" /></td>
You also haven't shown your code for making sure jQuery and jQuery UI are loaded on the page.
I just checked and this one works perfectly :
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testDatePicker.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="myTextBox"></asp:TextBox>
</div>
</form>
</body>
</html>
script.js
$(function() {
$("#myTextBox").datepicker();
});
I may advice you to remove the ReadOnly proprety since the datepicker will try to modify the textBox but not so sure.
Just add .ClientID with the textbox id as follows.
JS
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#<%=txtage.ClientID%>').datepicker();
});
});
Asp.Net takes a property that is TextMode That loads a calendar, which has to be equal "Date" - TextMode="Date".
Example:
<asp:TextBox ID="txtage" TextMode="Date" runat="server" ReadOnly="true"></asp:TextBox>
I have a content page in ASP.Net web app.
In that I am trying to use Jquery UI Autocomplete. But it does not work. What is wrong in this page? Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="contentMainBody" runat="server" >
<link href="Atlas_Css/menu.css" rel="stylesheet" type="text/css" />
<link href="Atlas_Css/jquery.simplyscroll.css" rel="stylesheet" type="text/css" media="all" />
<link href="Atlas_Css/Jquery%20UI.css" rel="stylesheet" type="text/css" />
<script src="JS_AtlasFly/jquery.js" type="text/javascript"></script>
<script src="Scripts/Validations.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.min.js" type="text/javascript"></script>
<script src="JS_AtlasFly/js-image-slider.js" type="text/javascript"></script>
<script src="JS_AtlasFly/accordian.pack.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function ()
{
var availableTags = [ <%= PassFname %> ];
$("#txtFname" ).autocomplete({
source: availableTags
});
}
</script>
<div id="testDiv" runat="server">
<asp:Label ID="lblName" runat="server" Text="F Name"></asp:Label> <asp:TextBox ID="txtFname" runat="server"></asp:TextBox>
</div>
NOTE: the server side variable, PassFname, I am populating in code behind .
In a normal asp.Net page , without using master page (within the same project), Autocomplete works fine.
What is wrong in this page? is it because of master page?
What is the solution for this?
Since the same code behind code works in another page, I am not including it here. I have checked it here also, the string variable is populated on page load. Only autocomplete is not binding.
Any help will be appreciated.
I found the solution to this. I used the clientId of the TextBox directly in
Javascript.
like this:
$("#ctl00_contentMainBody_txtFname").autocomplete({
source: availableTags
});
that solved the binding of autocomplete with the textbox's id.
BTW, using <%=txtFname.ClientID%> doesnot solve the issue. Instead the page stops rendering.
So I used the client Id from page source, and it works.
Thanks to all
I'm semi-new to writing ASP.Net applications using master pages and I've run into an issue I've spent some time on but can't seem to solve.
My situation is that I have a master page with a structure that looks like this:
<head runat="server">
<title>Test Site</title>
<link rel="Stylesheet" type="text/css" href="Default.css" />
<script type="text/javascript" language="javascript" src="js/Default.js" />
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<asp:ContentPlaceHolder ID="cphHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="divHeader">
<asp:ContentPlaceHolder ID="cphPageTitle" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="divMainContent">
<asp:ContentPlaceHolder ID="cphMainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
I then have a page that uses this master page that contains the following:
<asp:Content ContentPlaceHolderID="cphHead" runat="server">
<script type="text/javascript" language="javascript" >
function test() {
alert("Hello World");
}
</script>
</asp:Content>
<asp:Content ContentPlaceHolderID="cphMainContent" runat="server">
<fieldset>
<img alt="Select As Of Date" src="Images/Calendar.png" id="aAsOfDate" class="clickable" runat="server" onclick="test();" />
<asp:Button runat="server" CssClass="buttonStyle" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Clicked"/>
</fieldset>
</asp:Content>
When I run this page and click on the image I get an "Object Expected" error.
However, if I place the test function into my Default.js external file it will function perfectly.
I can't seem to figure out why this is happening. Any ideas?
EDIT:
Try using an http analyzer like fiddler (fiddler2.com/fiddler2) to see if the script is actually loading. The issue is probably that the relative path of the aspx page is incorrect for the script you're loading. The path is always relative to the executing aspx, not the location of the Master Page. If the script isn't loaded, the function test() never exists hence the error.
Try this in your header to make sure the path is always correct
<script type="text/javascript" language="javascript" src='<%= Page.ResolveClientUrl("~/js/Default.js") %>' ></ script>
instead of
<script type="text/javascript" language="javascript" src="js/Default.js" />
I have used JQuery within my asp.net page. JQuery is working fine. I could see the calendar and can pickup the date. The problem is that when the page is postbacked the value is lost. Am i missing some code? Does anyone of you have the idea?
Below is what i have done -
1) Included the files -
<script src="../scripts/date.js" type="text/javascript"></script>
<script src="../scripts/jquery.datePicker.js" type="text/javascript"></script>
<link href="../css/DatePicker.css" rel="stylesheet" type="text/css" />
<link href="../css/DateCalendar.css" rel="stylesheet" type="text/css" />
2) Linked with the textboxes -
jQuery(function($){
Date.format = 'mm/dd/yyyy';
$("#<%=txtAssignDate.ClientID%>").datePicker({startDate:'01/01/1996'});
$("#<%=txtCloseFileDate.ClientID%>").datePicker({startDate:'01/01/1996'});
$("#<%=txtInspectionDt.ClientID%>").datePicker({startDate:'01/01/1996'});
});
If the datepicker is working fine and selecting a value, you probably forgot to tell the text field to retain it's value on postback. If you're using Visual Studio/Visual Web Developer, one of the properties of the textfield object is "EnableViewState", which should be set to true.
Here is my test code:
aspx:
<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
<script src="/js/date.js" type="text/javascript"></script>
<script src="/js/jquery.datePicker.js" type="text/javascript"></script>
<link href="/css/datePicker.css" rel="stylesheet" type="text/css" />
<form id="form1" runat="server">
Date: <asp:TextBox ID="txtDate" runat="server" /><br />
<asp:Button ID="btnSubmit" Text="Click" runat="server" OnClick="btnClick" />
</form>
C#:
protected void btnClick(object sender, EventArgs e)
{}
and it's working perfectly. Please check if you are running some code on postback which is resetting the field.
I found the reason. The problem was because of masking. I have also used the JQuery masking. I found the dates are saved in database but while displaying the dates within text fields it was wipe off the values having single digit because of masking mm/dd/yyyy. For ex. 09/01/2009.