Restrict Selecting Date from Calendar Control

Question

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>
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            TextBox4.Text = Calendar1.SelectedDate.ToShortDateString();
            Calendar1.Visible = false;
        }

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

        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            Calendar1.Visible = true;
        }

Answer 1

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?

 

Answer 2

@Gnanavel Sekar , Thanks for your reply. I will also try this one.

Answer 3

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 

 

Answer 4

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

 

Answer 5

@Nitin Sontakke

 

Yes I have seen it but it's a different scenario.  

Answer 6

Have you had a look at this?

 

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