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

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:
    1. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    2. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    3. <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:
    1. <form id="form1" runat="server">
    2. Select Date <asp:textbox ID="txtFromDate" runat="server" BackColor="Yellow"></asp:textbox>
    3. </form>
  3. Add the following script to the head section of the HTML form:
    1. <script> $(function () {
    2. $("#txtFromDate").datepicker();
    3. }
    4. );
    5. </script>
  4. Running the code.

    The following will be the screen after running the code:

    running
  5. Mouse hover on TextBox Datetime picker will be display

    Datetime picker
  6. Formatting and other options

    Add a calendar image.

    We need to add the following code to display the calendar image:
    1. <script> $(function () {
    2. $("#txtFromDate").datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true });
    3. }
    4. );
    5. </script>
  7. Running the code

    Running the code

    After clicking on the text button we can see the calendar as in the following:

    calendar
  8. Display Year and Month together

    We need to add the following code to see the year and month together:
    1. <script> $(function () {
    3. $("#txtFromDate").datepicker({ changeMonth: true, changeYear: true });
    4. }
    5. );
    6. </script>
    Month together
  9. Display multiple months

    We can display multiple months on mouse hover.

    We need to add the following code:
    1. <script> $(function () {
    2. $("#txtFromDate").datepicker({ numberOfMonths: 2, showButtonPanel: true });
    3. }
    4. );
    5. </script>
    Running the code

    Running
  10. Show week number

    By adding the following code we can display week number on the calendar.
    1. <script> $(function () {
    2. $("#txtFromDate").datepicker({ showWeek: true, firstDay: 1 });
    3. }
    4. );
    5. </script>
    week number

Conclusion

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

References

jqueryui