How to use Datetime Picker

Question

Using ASP.Net & C#

I want to use a datetimepicker in my web page, i cannot find the control, How to get a datetime picker control in the web page.

Can any provide a sample code.

Need C# code Help.

Answer 1

I use the jQuery datepicker on my pages. You might take a look at http://jqueryui.com/demos/datepicker/.

The use is that you just define a normal textbox in your c#/asp.net pages and on the client-side all the datepicking functions are added.

On the webpage you would have at least this part of the code:

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

You find a working demo here: http://jqueryui.com/demos/datepicker/default.html

Answer 2

If you don't mind of using jQuery you can just use a textbox and covert it into a Date and time picker with jQuery.

more explanation on how to use on the jQuery site: http://plugins.jquery.com/project/timepicker-addon

Just include 3 javascript references to the page

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon-0.5.min.js"></script>

the use the plugin as shown in the code below

// date and time
$('input').datetimepicker({...});
// or just time
$('input').timepicker({...});

EDIT: (added urls to the javascript files)

the Javascript files can be downloaded from the urls below:

http://trentrichardson.com/examples/timepicker/js/jquery-1.4.2.min.js

http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.custom.min.js

http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon-0.5.min.js

EXTRA EXAMPLE:

<div class="example-container">
  <p>Show time in AM/PM 12 hour format</p>
  <div>
     <input type="text" id="example2" value="" />
  </div>
  <script type="text/javascript">
    $('#example2').datetimepicker({ampm: true});
  </script>
</div>

Answer 3

You could use the ASP .NET AJAX Calendar Extender along with the standard textbox control.

See examples here

Once you have installed the Ajax Tool Kit (download from here) then it is a case of adding three lines to your web page:

 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>
 <asp:TextBox runat="server" id="txtCalendar"></asp:TextBox>
 <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtCalendar"></asp:CalendarExtender>