Datetime Control Using jQuery

Introduction

I would like to share how to create a datetimepicker using the jQuery API.

I collected the following material from various web resources and tried to explain them in a simple way.

Expected UI for datetimepicker



As soon as the user hovers the mouse on the text box this datetime control will be visible to select the date.

Procedure

1. Add the following jQuery link to the code:
   

   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

2. Add a text box to the web form as in the following:
   

   <form id="form1" runat="server">
   Select Date <asp:textbox ID="txtFromDate" runat="server" BackColor="Yellow"></asp:textbox>
   </form>

3. Add the following script to the head section of the HTML form:
   

   <script> $(function () {
   $("#txtFromDate").datepicker();
   }
   );
   </script>

4. Running the code.
   
   The following will be the screen after running the code:
   
   
   
5. Mouse hover on TextBox Datetime picker will be display
   
   
   
6. Formatting and other options
   
   Add a calendar image.
   
   We need to add the following code to display the calendar image:
   

   <script> $(function () {
   $("#txtFromDate").datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true });
   }
   );
   </script>

7. Running the code
   
   
   
   After clicking on the text button we can see the calendar as in the following:
   
   
    
8. Display Year and Month together
   
   We need to add the following code to see the year and month together:
   

   <script> $(function () {
   
   $("#txtFromDate").datepicker({ changeMonth: true, changeYear: true });
   }
   );
   </script>

   
    
9. Display multiple months
   
   We can display multiple months on mouse hover.
   
   We need to add the following code:
   

   <script> $(function () {
   $("#txtFromDate").datepicker({ numberOfMonths: 2, showButtonPanel: true });
   }
   );
   </script>

   Running the code
   
   
    
10. Show week number
    
    By adding the following code we can display week number on the calendar.
    

    <script> $(function () {
    $("#txtFromDate").datepicker({ showWeek: true, firstDay: 1 });
    }
    );
    </script>

    
    

Conclusion

Using the code above we can use a Datetimer control provided by the jQuery API.

References

jqueryui