Restrict Selecting Date from Calendar Control

Jes Sie

9y2.3k.NET

I have 2 textboxes, the first textbox is a date from the database and the second textbox is asp:calendar. Now, this is what I want to achieve: Textbox2 cannot select a date older that what is in textbox1. Below is my code but it is not working.

html and c# code:

<ajaxToolkit:CalendarExtender ID="calFirst" runat="server"
TargetControlID="TextBox1"
CssClass="MyCalendar"
Format="MMMM d, yyyy" />
<asp:TextBox ID="TextBox1" runat="server">asp:TextBox>
<br>
<asp:TextBox ID="TextBox4" runat="server">asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server" Height="17px"
ImageUrl="~/img/calendar.png" OnClick="ImageButton1_Click" Width="21px" />
<asp:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"
OnDayRender="Calendar1_DayRender" Visible="False">asp:Calendar>
1. protected void Calendar1_SelectionChanged(object sender, EventArgs e)
2. {
3. TextBox4.Text = Calendar1.SelectedDate.ToShortDateString();
4. Calendar1.Visible = false;
5. }
7. protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
8. {
9. DateTime date = Convert.ToDateTime(TextBox1.Text);
10. if (e.Day.Date > date)
11. {
12. e.Cell.Enabled = false;
13. e.Day.IsSelectable = false;
14. }
15. }
17. protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
18. {
19. Calendar1.Visible = true;
20. }

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Nitin Sontakke9y ago
Accepted answer
How is it different is not clear to me. Can you please explain?

In fact, you already seem to have done it. So where is the problem?

You should also elaborate on "not working". Did you debug? In _DayRender event, is date variable getting correct value?
Jes Sie9y ago
@Gnanavel Sekar , Thanks for your reply. I will also try this one.
Gnanavel Sekar9y ago
Just set the minimum value for second calender once the date picked from first calender , for this you may use client side jquery to overcome this.
example in click event
var arr = selectedDate.split("/");
var date = new Date(arr[2]+"-"+arr[1]+"-"+arr[0]);
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var minDate = new Date(y, m, d + 1);
$("#EndDate").datepicker('setDate', minDate);

Refer below links

http://stackoverflow.com/questions/27721133/jquery-datepickers-setting-end-date-from-a-start-date
http://stackoverflow.com/questions/24894048/jquery-datepicker-how-to-set-start-and-end-date
http://stackoverflow.com/questions/17016598/jquery-ui-picking-a-start-and-end-date-within-range-based-on-start-date
http://www.aspsnippets.com/Articles/jQuery-DatePicker-Start-Date-should-be-less-than-End-date-validation.aspx
Jes Sie9y ago
@Nitin Sontakke

Thank you for pointing my mistake. I got it now. The problem is the ">", I changed it to "<" and now it worked!.
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
        {
            DateTime date = Convert.ToDateTime(TextBox1.Text);

            if (e.Day.Date < date)
            {
                e.Cell.Enabled = false;
                e.Day.IsSelectable = false;
            }
        }
Jes Sie9y ago
@Nitin Sontakke

Yes I have seen it but it's a different scenario.
Nitin Sontakke9y ago
Have you had a look at this?

http://stackoverflow.com/questions/10227417/setting-minimum-and-maximum-date-on-calendar