I am having very strange issue. I am using the Ajax Toolkit Calendar Extender. I have Update Panel - > ListView -> TextBox (AutoPostBack=Yes).
If I type in box it will update to db then do update panel using code behind updatepanel.update(). This works fine. So I want to put calendar in the text field so I use Ajax Calendar Extender and call the target control ID of the textbox and when I am in there I click the textbox and calendar pops up then I choose date and textbox changes to new date then updates to db then postbacks, but the problem is the calendar pops up again after the postback. I need a way to hide that damn calendar after selecting date the first time.
<asp:TextBox ID="txtDespatchDate" runat="server" CssClass="tblDespContTxtLst" Text='<%# Eval("DescDespatchDate") %>' Width="70px" AutoPostBack="True" OnTextChanged="updDespatchLine" AutoComplete="Off" />
<ajaxToolkit:CalendarExtender ID="calDespatchDate" runat="server" CssClass="Calendar" Format="dd/MM/yyyy" PopupPosition="BottomLeft" TargetControlID="txtDespatchDate" />
I figured this one out a long time ago, and being on a server and all and doing postbacks I couldnt get around it using the ajax extender, so I have to use JQuery, I did something like this;
Code Behind
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
ScriptManager.RegisterStartupScript(NameOfUpdatePanel, Me.GetType, "SuperCalendar", "$( function() {
$('.Calendar').datepicker({ dateFormat: 'dd/mm/yy'}); } );", True)
End Sub
ASP Page
<asp:UpdatePanel ID="NameOfUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtBox1" runat="server" CssClass="Calendar" />
</ContentTemplate>
</asp:UpdatePanel>
You need to add the latest JQuery Header to the top of your page like;
<script src="../Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
All you have to do is every time you want a date popup you just add the Calendar Class to it so;
CssClass="SomeTextBoxClass Calendar"
I dont get any problems after postbacks with it popping up anymore.
I'm using CalendarExtender with a textbox as the target control. My code is below:
<asp:TextBox ID="textBoxFromDate" runat="server" EnableViewState="true" />
<asp:CalendarExtender ID="textBoxFromDate_CalendarExtender" runat="server" Enabled="True"
TargetControlID="textBoxFromDate" Format="dd/MM/yyyy" EnableViewState="true">
</asp:CalendarExtender>
So I use the calendar control to set the value within the textbox. This works fine, however when a postback happens on the page the textbox value is reset to the default date for the calendar control.
How can I get the textbox to retain its value on a postback?
Thanks in advance.
I'm using ASP.Net 4.0.
did you try setting readonly field dynamically rather than in markup ? Also i'd make sure you are not resetting the value in Page_Load() during postbacks.
Or what about trying somehting like this on Page_load , also checking to see if there is a valid date in box before attempting to set it to the calendar extender selected date ?
if (IsPostBack)
{
MyCalendarExtender.SelectedDate =
DateTime.ParseExact(MyTextBox.Text, MyCalendarExtender.Format, null);
}
Im sure this is a very simple and easy to answer question but I've been looking at this too long and being new to ASP I cant seem to find a solution that works.
I have an ASP calendar extender, I click it and the calendar displays as expected, the selected date appears in the textbox, but when the page then posts back I cant get the selected date value from either the textbox.text or the calendarextender.selecteddate properties, I tested this by trying to assign these values to a string variable in the page_load event.
Am I missing something here?
Here is my code so far:
I have the script manager declared at the start of my form
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
Then my textbox / datepicker within table lower down
<asp:TextBox ID="DateChooser"
runat="server"
ReadOnly="true"
style="text-align: center" Width="85px"
OnTextChanged="DateChooser_TextChanged"
AutoPostBack="true" />
<div style='position:relative; z-index:1'>
<cc1:CalendarExtender CssClass="cal_Theme1"
ID="DateChooser_CalendarExtender"
runat="server"
Enabled="True"
TargetControlID="DateChooser"
PopupPosition="Right"
Format="dd MMM yyyy"
/>
</div>
</td>
Since you have set textbox ReadOnly to true it lose changes performed by client-side code on postback. Follow this link for more detailed explanation: TextBox.ReadOnly Property Consider to set readonly attribute on textbox by client code.
I have textbox in my asp.net 3.5 VB.net webform
in my textbox1 the text is : 30-Dec-2010, 06:00:00 PM
i want when the date in textbox is greater than textbox1 then the Label text would be "No REfund ! Sorry"
How to do this
You should use ASP.Net CompareValidator for this purpose. You can check both on client- and serverside. Besides i would recommend not to have Date AND Time in one Textbox. That makes it more difficult to validate and it's not standard, so it might be confusing and error-phrone for users.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox1" ControlToValidate="TextBox2" Type="Date" Operator="GreaterThan" runat="server" ErrorMessage="No REfund ! Sorry" EnableClientScript="true" ></asp:CompareValidator>
<asp:Button ID="BtnPostback" runat="server" Text="postback" />
On the serverside you should also trigger the validation(f.e. if javascript is disabled):
Private Sub BtnPostback_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles BtnPostback.Click
Page.Validate()
If Me.IsValid Then
'Do something f.e. save'
End If
End Sub
CompareValidator Class
It would be better if you do it using javascript because this functionality does not require postback. A similar question has been posted on stackoverflow which compares two dates using javascript. Check it out here. You just need to extend it to incorporate assigning text to the label.
is there any good free/open source time picker control that goes well with ASP.NET Calendar control?
The answer to your question is that Yes there are good free/open source time picker controls that go well with ASP.NET Calendar controls.
ASP.NET calendar controls just write an HTML table.
If you are using HTML5 and .NET Framework 4.5, you can instead use an ASP.NET TextBox control and set the TextMode property to "Date", "Month", "Week", "Time", or "DateTimeLocal" -- or if you your browser doesn't support this, you can set this property to "DateTime".
You can then read the Text property to get the date, or time, or month, or week as a string from the TextBox.
If you are using .NET Framework 4.0 or an older version, then you can use HTML5's <input type="[month, week, etc.]">; if your browser doesn't support this, use <input type="datetime">.
If you need the server-side code (written in either C# or Visual Basic) for the information that the user inputs in the date field, then you can try to run the element on the server by writing runat="server" inside the input tag.
As with all things ASP, make sure to give this element an ID so you can access it on the server side.
Now you can read the Value property to get the input date, time, month, or week as a string.
If you cannot run this element on the server, then you will need a hidden field in addition to the <input type="[date/time/month/week/etc.]".
In the submit function (written in JavaScript), set the value of the hidden field to the value of the input type="date", or "time", or "month", or "week" -- then on the server-side code, read the Value property of that hidden field as string too.
Make sure that the hidden field element of the HTML can run on the server.
In the textbox add this:
textmode="Date"
It gives you nice looking Datepicker like this:
Other variations of this are:
textmode="DateTime"
It gives you this look:
textmode="DateTimeLocal"
JQuery has the best datepicker IMHO. While it's not specific to .Net is still works great.
HTML:
<input type="text" value="9/23/2009" style="width: 100px;" readonly="readonly" name="Date" id="Date" class="hasDatepicker"/>
In head element:
<script src="../../Scripts/jquery-1.3.2.min.js" language="javascript" type="text/javascript"/>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"/>
Simple as that!
Since it's the only one I've used, I would suggest the CalendarExtender from http://www.ajaxcontroltoolkit.com/
This is solution without jquery.
Add Calendar and TextBox in WebForm -> Source of WebForm has this:
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChange">
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Create methods in cs file of WebForm:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = DateTime.Today.ToShortDateString()+'.';
}
protected void DateChange(object sender, EventArgs e)
{
TextBox1.Text = Calendar1.SelectedDate.ToShortDateString() + '.';
}
Method DateChange is connected with Calendar event SelectionChanged. It looks like this:
DatePicker Image
<asp:TextBox ID="TextBox1" runat="server" placeholder="mm/dd/yyyy" Textmode="Date" ReadOnly = "false"></asp:TextBox>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
Basic Date Picker Lite
This is the free version of their flagship product, but it contains a date and time picker native for asp.net.
Try bootstrap-datepicker if you are using bootstrap.
There is an easy, out of the box implementation: the HTML 5 input type="date" and the other date-related input types.
Okay, you can't style the controls that much and it doesn't work on every browser, but still it can be a very good option in the long term if all modern browsers support it and don't want to include heavy libraries that don't always work that good on mobile devices.
#Html.EditorFor(model => model.Date, new { htmlAttributes = new { #class = "form-control", #type = "date" } })
this works well
If you would like to work with a textbox, be aware that setting the TextMode property to "Date" will not work on Internet Explorer 11, because it does not currently support the "Date", "DateTime", nor "Time" values.
This example illustrates how to implement it using a textbox, including validation of the dates (since the user could enter just numbers). It will work on Internet Explorer 11 as well other web browsers.
<asp:Content ID="Content"
ContentPlaceHolderID="MainContent"
runat="server">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#
<%= txtBoxDate.ClientID %>").datepicker();
});
</script>
<asp:TextBox ID="txtBoxDate"
runat="server"
Width="135px"
AutoPostBack="False"
TabIndex="1"
placeholder="mm/dd/yyyy"
autocomplete="off"
MaxLength="10"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1"
runat="server"
ControlToValidate="txtBoxDate"
Operator="DataTypeCheck"
Type="Date">Date invalid, please check format.
</asp:CompareValidator>
</asp:Content>