Date Picker in Visual Web Parts

The problem:
I need to create a Visual Web Part where one of the fields should be a date. Using the SharePoint DateTimeControl does not work, because, when displayed in a user control, the calendar it shows looks horrible. Apparently the SharePoint DateTimeControl is meant to be used in an application page rather than a user control. There has to be a better way!

The solution:

A good alternative is a DatePicker jQueryUI plugin. You will have to add a LAYOUTS mapped folder to your project and create the css and js folders. In the js folder, put the jquery-1.6.1.min.js as well as jquery-ui-1.8.16.custom.min.js files; in the css folder, there should be the base folder where there will be three CSS files (jquery.ui.core.css, jquery.ui.datepicker.css, and jquery.ui.theme.css) as well as the images folder with all the images for the base theme. Then, in your ASCX file, make sure you have the following lines:

<link rel="stylesheet" type="text/css" media="all" href="_layouts/jQuery/css/base/jquery.ui.core.css" />

<link rel="stylesheet" type="text/css" media="all" href="_layouts/jQuery/css/base/jquery.ui.datepicker.css" />

<link rel="stylesheet" type="text/css" media="all" href="_layouts/jQuery/css/base/jquery.ui.theme.css" />       

<script type="text/javascript" src="_layouts/jQuery/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="_layouts/jQuery/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">

    $(function () {

        $('input[id*="dtDatePicker"]').datepicker({ dateFormat: 'mm/dd/yy' });

    });

</script>

For the actual date field, put this line into your ASCX file:

<asp:TextBox ID="dtDatePicker" runat="server" />

That's it. Whenever the focus is on the dtDatePicker control, the little pretty calendar will appear and the user will be able to pick the date. You also might want to use the jQueryUI date validator plugin to validate the date entered.