How to make some Date input control like a texbox.
I need start date and end date and count period and make a database select.
But if I put 2 Calendars on my page that will be looking like wierd :-/
So I want to know how to make some dateinput masks for textboxes or some else solution.
The AjaxControlToolkit offers a couple of ways to do this. Probably the one you want is the CalendarExtender which you attach to a TextBox control, and which displays a clickable calendar when the textbox gets the focus, e.g. this markup:
<asp:ScriptManager runat="server" ID="ScriptManager" />
<asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
<ajaxtoolkit:CalendarExtender runat="server" ID="MyCalendar" TargetControlID="TextBox1" />
produces this in the browser when the textbox is clicked on:
alt text http://www.philippursglove.com/stackoverflow/calendarextender.png
There's also a DatePicker in JQuery UI that does something similar.
Another extender to look at is the MaskedEditExtender which allows you to limit your user's input so that they can only enter valid dates in a TextBox.
Related
I had a ASP.NET webpage with several text boxes (WebControls) with mandatory data entry. Hence, the text boxes have an associated RequiredFieldValidator & this form was working fine.
Recently, I had to add an additional textbox which accepts date as input. To enforce correct date format, I decided to associate this textbox to the CalendarExtender of the AjaxControlToolkit, so that on clicking the textbox a pop up calendar appears. After successful build of the project, when I navigate to the page an error message “Assembly AjaxControlToolkit does not contain a web resource with name jquery” is returned.
It was also observed that when I deleted all the text boxes & their associated RequiredFieldValidators the Form is working fine. That is when the textbox with CalendarExtender is clicked the Calendar appears without any problem.
It appears that AjaxControlToolkit (ToolkitScriptManager) & RequiredFieldValidator cannot co-exist on a web form. I am using Visual Studio Professional 2012.
Any suggestions ?. Thanks in advance.
Please follow the following steps:
Register Assembly, Namespace and TagPrefix
Than put ScriptManager
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Try the following code for calendar popup:
<asp:TextBox ID="myTextBox" runat="server" CssClass="textBoxStyle" Width="282px">
</asp:TextBox>
<asp:ImageButton ID="myImg" runat="server" ImageUrl="~/myImage.png"/>
<cc1:CalendarExtender ID="calendarId" runat="server" PopupButtonID="myImg"
TargetControlID="myTextBox" Enabled="True">
</cc1:CalendarExtender>
I want to keep TextBox attribute Read Only in web form. But when I keep this Read Only , On PostBackits values get vanishes and I get empty text. How can I achieve the same functionality without loosing TextBox values.
You can achieve this by preventing user to enter values in the textbox, thus add following attributes to the textbox. It will maintain values even on postback also.
onkeypress="return false;"
Change it by removing the ReadOnly=”true” from the tag , we will add it in the code.
Now in the code add the following :
TextBox1.Attributes.Add(“readonly”, “readonly”);
You probably have it like this right now:
<asp:TextBox ID="MyTextBox" runat="server" Enabled="false" />
Just change this to:
<asp:TextBox ID="MyTextBox" runat="server" ReadOnly="true" />
And it will send its value over postback like all other form elements while still being read only.
Hi I am using an AjaxControlToolkit Calander control. But as per my requirements I have to split the selected date into separate textboxes for date month and year. So I have used a textbox say "textbox1" which have an popupimage button for the ajax control calander.
I make the textBox1 hidden with css and have autopostback set to true. On the text change event I split the date string and put it in separate textboxes as desired.
Everything is working fine except for the positioning of the Calander control. When I hide the main textbox control the calander positions itself on the top left side of the screen and not near the popimage. How can I fix that.
It will surely have an abnormal behavior if you try to attach a calendar control on a hidden TextBox. Instead of hiding the textbox, make it look like hidden but not literally hidden.
for example
<asp:TextBox ID="textBox1" runat="server" style="border:0 none Transparent;margin:0;width:0;background-color:Transparent" ReadOnly="true" />
Thanks to the answer above just a slight modification is needed to make it the correct answer.
<asp:TextBox ID="textBox1" runat="server" style="border:0 none Transparent;margin:0;width:0;background-color:Transparent" />
I'm using a CalendarExtender control with the help of <img> to populate a TextBox with a date. I am using this in EditItemTemplate of GridView. But when I click on the image, the calendar control is not poping up.
I have used this CalendarExtender control in four or five other places (in this project) also. Everywhere else it is working fine. I have compared the code from the well working version to this code. No difference at all.
I have written the code like below:
<EditItemTemplate>
<asp:TextBox ID="txtDateDelivered" runat="server"
Text='<%# Bind("DateDelivered","{0:dd/MM/yy}") %>'
CssClass="DateTextBoxInGridView" >
</asp:TextBox>
<asp:CalendarExtender ID="calexDateDelivered" runat="server"
Format="dd/MM/yy"
TargetControlID="txtDateDelivered"
PopupButtonID="calDateDelivered">
</asp:CalendarExtender>
<img src="Images/calendar.gif"
id="calDateDelivered"
alt="Calendar" />
</EditItemTemplate>
Can anybody please tell where could be the problem?
how many row do you have in grid? also probably you have more than one image with such id
The image tag which you have used is not a server control.
It is simple html control, this is the reason why the calender control does not reconise this image control..
Try using asp.net image button over here instead of .
It should work then.
cheers....
Rahul C.
Is there a way to set up the calendar extender so that the calendar displays when the text box recieves focus AND when the when the element with the "PopupButtonID" is clicked? With my current settings it seems to be one or the other.
It's a bit of an ugly way to do it, but you can do this if you're prepared to use two extenders.
<asp:TextBox runat="server" ID="DateTextBox" />
<asp:ImageButton runat="server" ID="CalendarImageButton" ImageUrl="~/date_16x16.gif" />
<ajaxtoolkit:CalendarExtender runat="server" id="Extender1" TargetControlID="DateTextBox"/>
<ajaxtoolkit:CalendarExtender runat="server" ID="Extender2" TargetControlID="DateTextBox" PopupButtonID="CalendarImageButton" />
This way the calendar will appear whether you focus on the textbox or click the imagebutton.
Not that I'm aware of; it's one or the other. The only way I can think of is set it to use the popup control, then add a JS event handler for the textbox focus, and manually find the calendar extender, and there may be a show() method so you could manually invoke the trigger potentially. Not 100% sure. To find out do:
function textboxFocus() {
var c = $find("<%= calextenderid.ClientID %>");
//can use firebug to see if c.open method exists, or check for something else
}
Again, never done it, so not 100% sure.
HTH.
Use the CalendarExtender's show() method, referencing it by BehaviorID:
<asp:TextBox runat="server" ID="DateTextBox" />
<asp:ImageButton runat="server" ImageUrl="~/date_16x16.gif" OnClientClick="$find('Extender1').show();return false;" />
<ajaxtoolkit:CalendarExtenderrunat="server" id="Extender1" BehaviorID="Extender1" TargetControlID="DateTextBox"/>