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...........





Related Posts:

  • Culture info in RadDateTime Picker In this example we can give culture info for localization in RadDatetimePicker. for this below example u can get different localizations according to their country. it is one of the property in RadDateTimePicke… Read More
  • Image Mouse Hover in asp.net To show image in particular div when mouse hover on the image using asp.net   Script <script type="text/javascript" language="javascript">         function ShowToolTip(con) {   &n… Read More
  • Word Documents and Excel Documents in IFRAME In this below example we are converting word OR excel document to HTML. In this case we are converting and giving converted HTML file as ""src"" to ""iframe"". Step By Step Procedure : 1)First step is create one… Read More
  • Word document in iframe This is screen shot for iframe.Here In the below Screenshot iframe viewing the word document in the form of html. so i am giving html to the Iframe src. Iframe can view excel,csv,pdf,text file… Read More
  • Replace characters in javascript In server side we have "Replace" method to replace the characters in a string but on javascript replace method will be not useful in certain cases instead of that we can do for loop to replace the particular characters and g… Read More

0 comments:

Post a Comment