ASP.NET DatePicker (VB) - asp.net

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

Related

JQuery input mask in asp.net

I have an asp:button on my web page. Can I apply JQuery input mask on my asp.net button. Below is what I did:
I installed
Install-Package jQuery.InputMask -Version 5.0.2
I have this on my page in Head tag:
<script src="Scripts/inputmask/inputmask.js"></script>
On my web page, I have Phone number field:
<asp:TextBox ID="txtPhonenumber" runat="server" placeholder="(XXX) XXX-XXXX"></asp:TextBox>
I want to apply input mask of phone number on my webform if possible.
<asp:TextBox ID="txtPhonenumber" runat="server"></asp:TextBox>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%= txtPhonenumber.ClientID %>").mask("(999) 9999-9999?9");
});
</script>
Output here:

Jquery autocomplete not working in asp.net

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

how to animate grid view rows to display one row after another in a same page. And all should be on the page?

how to animate grid view rows to display one row after another in a same page. And all should be on the page?
any body please help me out.thanks in advance
Animating an ASP.NET GridView is not what you're after. You'll want to animate the HTML generated from the ASP.NET GridView, and for that you'll need javascript and/or jQuery. These scripting languages were built for the web and facilitate DOM manipulation.
In this case, a possible approach is to render the rows invisible on document ready, then display (and animate) them one at a time.
You should now have sufficient information to continue your search.
after 2 days of my work i had done the following :
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("span[id$='label']").animate({marginLeft: "0.05in"},100).first().show("fast", function showNext() {
$(this).next().show(200, showNext);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater runat="server" ID="repeater1">
<ItemTemplate>
<asp:Label runat="server" ID="label" style="display:none" Text='<%#Eval("ename") %>'>
</asp:Label>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>

JQuery not working

I am trying to implement JQuery in my web page but i am not been able to implement it successfully.
I have a master page
where i added one script for menu bar that is already using jquery hosted by Google
This is coded in master page itself
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
Now i want to implement a Jquery to set the css visibility property to true or false.
into my content page of same master page.
<script type="text/javascript">
$(document).ready(function(){
$("#lnkAddMore").click(function(){
alert();
}
);
});
</script>
This html control is under my UpdatePanel.
I dont know why it is not working ?
I am using this control under UpdatePanel.
<input type="button" id="lnkAddMore" value="Add More" />
I tried to use it outside my update
panel it is running successfully but
not in UpdatePanel
I think there is a problem using it with an UpdatePanel
HERE IS MY PAGE SOURCE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<link href="../../Css/Domain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#lnkAddMore").click(function(){alert();$('#h').hide(100);});
$('#h').show(100);
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divDomain" runat="server">
<asp:gridview/>
<div style="text-align:right;">
<input type="button" id="lnkAddMore" value="Add More" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Do you really have nested <script> tags or was it a typo?
<script type="text/javascript">
<script type="text/javascript">
If that's not a typo, then that's probably the issue.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ddmenu > li').bind('mouseover', ddmenu_open)
$('#ddmenu > li').bind('mouseout', ddmenu_timer)
});
$(document).bind('click', ddmenu_close); // do you really want to close on any click?
</script>
I have used two approaches with jQuery and UpdatePanels.
The first is this:
jQuery $(document).ready and UpdatePanels?
The other approach I found on Rick Strahl's blog (http://www.west-wind.com/Weblog/posts/154797.aspx) Which is to do something like this in the code behind:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "alertScript",
#" $(document).ready(function(){
$("#lnkAddMore").click(function(){
alert();
}
);
});", true);
Check this out for another example: Problem with ScriptManager.RegisterClientScriptBlock and jQuery in Internet Explorer 8
Also have a look at jQuery's live() event subscriber.
Check that the ID of your button isn't actually getting changed to something like
ctl00_ContentPlaceHolder1_lnkAddMore
since it's residing in a content placeholder for the master page.
If it is, you'd have to adjust your JQuery.
When you're loading code in under an UpdatePanel, try not wrapping it in $(document).ready();. Ready isn't fired on document for AJAX events.

JQuery Datepicker issue - asp.net

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.

Resources