Wednesday 9 May 2012

Rad Date Time Picker With Today Button

Generally We use calender control to pick a particular day month and year to avoid typing.
But in rad date picker we don't find today button in calender..(in rad date picker default today button will appear in second click)
                    so to avoid more clicks  i am attaching following code

Ex:



there is no code for this example just we have to set some properties  as follows

IN .aspx Page
---------------


                    <telerik:RadDateTimePicker ID="rdpDateReq" runat="server">
                        <Calendar runat="server" >
                            <FooterTemplate>
                                <div style="width: 100%; text-align: center; background-color: Gray;">
                                    <input id="Button1" type="button" value="Today" onclick="GoToToday();" />
                                </div>
                            </FooterTemplate>
                        </Calendar>
                        <TimeView CellSpacing="-1" Culture="English (United States)" runat="server">
                        </TimeView>
                    </telerik:RadDateTimePicker>

to display calender image we need to click small calender ICON and then it will display according to their skin . so here for today button do the following steps (or) copy the code i displayed above
1)Add footer in calender control.
2)Add Div with style (Back Color for footer and button Type and settings)
3)with in the div Add one html button to avoid post back
4)Add JavaScript function to the button(it is displayed in the below of these steps)
5)Now u can see the today's date in rad date picker's text box




        <script type="text/javascript">
            function GoToToday() {
                var datepicker = $find("<%=rdpDateReq.ClientID%>");
                var dt = new Date();
                datepicker.set_selectedDate(dt);
                datepicker.hidePopup();
            }
        </script>


OUTPUT:
-----------

So next time u Click on Calender icon today time will selected automatically...........





0 comments:

Post a Comment