I need a calendar to be displayed on a textbox.
This can be achieved using ajaxToolkit: Calendar control.
I can use FilteredTextBoxExtender to ensure that it enters only valid characters.
Also I can use jQuery to ensure that the dates are valid dates only (13/13/20123 is an invalid date).
But is there a better way or ajax control (in the toolkit) for it?
Note: I am looking for a solution using ajax control toolkit. For my project, jQuery-UI is not allowed.
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />
<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
TargetControlID="txtDate"
FilterType="Custom, Numbers"
ValidChars="1234567890/" />
REFERENCE:
http://forums.asp.net/p/1825929/5076051.aspx/1?Re+How+to+disable+future+dates+in+ajax+calendar+extender+
Try Using jQuery UI Datepicker:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div>
jQuery UI Datepicker
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
I have converted ASP.NET WebForms DropDownList to dynamic loading with the great Select2 library. When I use loading of remote data, I need to use a
<input type="hidden" id="foo" />
that I'll turn into Select2 box with
$(document).ready(function () {
$("#foo").select2(...);
});
The problem is that when I'm trying to incorporate this into ASP.NET page and set the initial value from a query parameter, I can either use
<input type='hidden' id='foo' value='<%=Request["#id"] %>' class='bigdrop'/>
which I don't like, because I'll have logic in my markup, or
<asp:HiddenField runat="server" ID="foo" ClientIDMode="Static"/>
and set the value in codebehind, but I am unable to set the class for the input.
Which approach should I use?
there is no CssClass property on HiddenField! But I solved it in jQuery -
$(document).ready(function () {$("#foo").addClass('myclass'); }
Answer by "Axarydax"
I'm wanting to change the value of my inputs with my asp form fields so that when clicked it clears the content and if someone doesn't type any value and clicks another field it will re-add the default value again, if changed it leaves the new text.
eg. field:
<asp:TextBox ID="NameInfo" CssClass="NameInfo" Width="300" runat="server" text="Name" />
Thanks in advance for any responses. I'm a beginner at asp so I'm not sure how to do these types of features.
I believe the functionality you need would be best achieved using jQuery and a plugin. Perhaps look into http://code.google.com/p/jquery-watermark which from experience works well.
You should just need to download that library and then have something like the following within the head tags of your page:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/watermarkplugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=NameInfo.ClientID").watermark('The text you want to appear');
});
</script>
Found a simple alternative:
<asp:TextBox ID="NameInfo" CssClass="NameInfo" onfocus="if(this.value == 'Name'){this.value='';}" onblur="if(this.value == ''){this.value='Name';}" Width="300" runat="server" text="Name" />
I have a simple form that uses jQuery validation to notify the user of input errors, etc. When I add an ASP.NET CustomValidator to the form, it causes the page to postback and skip the jQuery validation. I need the form to not be submitted to the server until the client-validation is correct. Has anyone seen this before?
This is my form:
<form id="form1" runat="server">
<core:standardscriptmanager runat="server" />
<div>
<asp:textbox id="Email" name="Email" runat="server" cssclass="_RegisterFormValidate FormField Email {required:true, email:true, messages:{required:'You must enter an email address.', email:'Please enter a valid email address.'}}" maxlength="200" columns="75" width="98%" tooltip="Your email address"></asp:textbox>
<br /><br />
<core:recaptcha runat="server" />
<br />
<asp:linkbutton id="CreateAccount" runat="server" onclick="CreateAccount_Click" text="create"></asp:linkbutton>
</div>
</form>
And this is the core:recaptcha control that contains the custom validator:
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=XXXKEY">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=XXXKEY"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<asp:customvalidator id="RecaptchaValidator" runat="server" controltovalidate="DummyInput" onservervalidate="ServerValidate" validateemptytext="true" />
<asp:textbox id="DummyInput" runat="server" cssclass="Hidden"></asp:textbox>
Note: The DummyInput is only there to make the CustomValidator happy, my ServerValidate event correctly deals with the captcha results.
The ServerValidate portion of the CustomValidator is working fine during the postback, but I need it to stop interfering with the client-side validation. If I remove the CustomValidator from the recaptcha control, everything plays nice.
Do I need to do something like call jquery-validate in the CustomValidator's clientvalidationfunction in order to make this work correctly?
Any thoughts or suggestions would be welcome.
So it turns out the answer to this issue was to set CausesValidation="False" on my linkbutton and then call Page.Validate() in the linkbutton's OnClick handler.
It's not exactly the solution I was looking for since I'll have to remember to do those things every time I want to use recaptcha (or any custom validator for that matter) but this seems to work for now.
You can set the EnableClientScript property of your validator to false:
<asp:CustomValidator id="RecaptchaValidator" runat="server"
ControlToValidate="DummyInput" OnServerValidate="ServerValidate"
ValidateEmptyText="True" EnableClientScript="False" />
Um, I have this guy:
<div class="buttonRight"><asp:Button ID="btnOK" runat="server" Text="OK" Width="68px"/></div>
which renders out to
<div class="buttonRight">
<input type="submit" name="_$_$pc$pc$tabTO$_$uc0$popupSelectCompetition$btnOK" value="OK" id="____pc_pc_tabTO___uc0_popupSelectCompetition_btnOK" style="width:68px;" /></div>
I need to call some javascript on that button without altering its behavior otherwise. I tried putting an OnClick asp attribute but that seems to be for postbacks to call server code, not passing through a javascript hook to the rendered html.
I also don't understand how the input being type='submit' affects me.
Add your client-side code to the OnClientClick property :
<div class="buttonRight">
<asp:Button ID="btnOK" runat="server" Text="OK" Width="68px"
OnClientClick="alert('client side scripts here');"/>
</div>
OnClick property used for server side events.
Or add onclick attribute to your control like that at code behind :
btnOK.Attributes.Add("onclick", "alert('client side scripts here');");