how to disable previous dates in CalendarExtender control through its render event? - asp.net

Basically, I just want allow select dates greater than today. I'd prefer this way to avoid show alert messages.

I don't think that it is supported in the current version of the Toolkit to restrict selectable dates. This is a simple workaround handling the ClientDateSelectedChanged-Event and validate the selected date:
How to make sure user does not select a date earlier than today or greater than today
There could be instances where you do not want the user to select a day earlier than the current date. For example: when you are providing the user a form to book tickets, you would not like him to choose an earlier date. To achieve this requirement, use the following javascript code.
Prevent the User from selecting a Date Earlier than today
<head runat="server">
<title>Calendar Extender</title>
<script type="text/javascript">
function checkDate(sender,args)
{
if (sender._selectedDate < new Date())
{
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
</head>
Call the code:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1"
runat="server" OnClientDateSelectionChanged="checkDate" TargetControlID="TextBox1" />
</div>
</form>
Select Date Greater than today
In the javascript, just change this line
sender._selectedDate > new Date()
Note: You may argue that the user can still change the date by typing into the textbox or entering an invalid date. Well that can be easily handled using a ValidationControl and is covered in the next tip.
Add validation to the CalendarExtender Control
A simple way to add validation to the Calendar is to add a ValidationControl to the textbox associated with a CalendarExtender. You have two choices:
Add an Extender to the ValidationControl. To do so, drag and drop a ValidationControl > click on the smart tag of the ValidationControl > choose Add Extender. From the Extender Wizard, choose ValidatorCalloutExtender. Using this approach makes it extremely easy to discover and attach control extenders to your controls. In VS 2005, you had to do this process manually, by wiring up control extenders.
You can choose not to add the Extender.
We will go ahead with option A. We will be adding two ValidationControls to the TextBox. The first, a CompareValidator to check if the user does not enter an invalid date (Eg: May 32) and second, a RangeValidator to keep the date range as desired.
Adding CompareValidator
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="Invalid Date"
Operator="DataTypeCheck" Type="Date">
</asp:CompareValidator>
<cc1:ValidatorCalloutExtender ID="CompareValidator1_ValidatorCalloutExtender"
runat="server" Enabled="True" TargetControlID="CompareValidator1">
</cc1:ValidatorCalloutExtender>
Adding RangeValidator – We will restrict the user to select a date range starting from today to 15 days from now.
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="RangeValidator"
Type="Date">
</asp:RangeValidator>
<cc1:ValidatorCalloutExtender ID="RangeValidator1_ValidatorCalloutExtender"
runat="server" Enabled="True" TargetControlID="RangeValidator1">
</cc1:ValidatorCalloutExtender>
In the code behind of your page, add this code
C#
protected void Page_Load(object sender, EventArgs e)
{
RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString();
RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString();
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString()
RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString()
End Sub
Well those were some tips associated with the CalendarExtender. As future versions of the toolkit are released, we should be hopeful that there will exist easier ways, of achieving this functionality.
From: http://www.dotnetcurry.com/ShowArticle.aspx?ID=149
Another advanced approach would be to extend the CalendarExtender javascript, but then you have your own custom version of the ajax toolkit.
http://codegoeshere.blogspot.com/2007/06/extending-calendarextender.html

set StartDate property of the calender extender to DateTime.Now.Date in the page load
this will show the previous dates as unselectable

Related

Ajax Toolkit Calendar Extender, Pops up twice after selection

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.

Textbox not retaining its value after postback using a calendar extender

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);
}

AJAX Calendar Extender / Textbox values always null after postback

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.

how to change the label text if date displayed in textbox2 is greater than textbox1?

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.

ASP.NET DateTime Picker

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>

Resources