Wednesday, December 28, 2011

CalendarExtender in asp.net

Example


in .aspx page




<asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
            DataSourceID="SqlDataSource1" ShowFooter="true" AllowPaging="True" AllowSorting="True">
            <Columns>           
               <asp:BoundField DataField="CategoryID" HeaderText="ID"
                 SortExpression="ID" />
                  <asp:BoundField DataField="Name" HeaderText="Name"
                 SortExpression="Name" />
              <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"/>
                </ItemTemplate>
            </asp:TemplateField>               
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=SUPROTIM;Initial Catalog=Northwind;Integrated Security=True"
            SelectCommand="SELECT [ID], [Name] FROM [test]" >
        </asp:SqlDataSource>



Display only the day and month in the CalendarExtender
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM" TargetControlID="TextBox1" />

How to make sure user does not select a date earlier than today or greater 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()

for detail:Click to view
Next>>(Autocomplete)                               (AnimationExtender)<<Back
 Add validation to the CalendarExtender Control : Click to view



No comments:

Post a Comment