How to use TimePicker to DatePicker MVC3 C#

asp.net-mvc-3, c#, datepicker, razor, timepicker

Solution

You simply replace your `datepicker` call with `datetimepicker` in the view and provide the necessary arguments for both:

<script type="text/javascript">
    $(document).ready(function () {
        $('#News_Date').datetimepicker({
            // Arguments for the date picker
            showOptions: { speed: 'fast' },
            changeMonth: false,
            changeYear: false,
            dateFormat: 'dd/mm/yy',
            gotoCurrent: true,

            // Arguments for the time picker    
            showSecond: true,
            timeFormat: 'hh:mm:ss',
            stepHour: 2,
            stepMinute: 10,
            stepSecond: 10
        });
    });
</script>

Problem

I'm struggling to understand how to combine the TimePicker http://trentrichardson.com/examples/timepicker/ solution to my existing ASP.Net MVC3 C# site that uses DatePicker. DatePicker is currently working fine on it's own, but I need to add the time as well as the date, and TimePicker looks perfect for what I need, only I'm not sure how to implement it. I see the example gives this code: ``` $('#example1').datetimepicker(); ``` but I am unsure how to work it into my existing site / DatePicker function. I have made sure I include these JS files in the HEAD section on the _Layout page, as well as adding the CSS to my existing DatePicker CSS file (jquery-ui-1.7.3.custom.css): ``` <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.7.3.custom.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-sliderAccess.js")" type="text/javascript"></script> ``` and on my View page I have this code which displays the input and calls the DatePicker function (this works fine in its current form): ``` @model test.Models.News @{ ViewBag.Title = "Create"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <div class="editor-label"> @Html.LabelFor(model => model.News_Date) </div> <div class="editor-field"> @Html.EditorFor(model => model.News_Date, "News_Date", new { @ID = "News_Date" }) </div> <p> <input type="submit" value="Create" /> </p> } <script type="text/javascript"> $(document).ready(function () { $("#News_Date").datepicker({ showOptions: { speed: 'fast' }, changeMonth: false, changeYear: false, dateFormat: 'dd/mm/yy', gotoCurrent: true }); }); </script> ``` I am unsure how to install the TimePicker function so it works with DatePicker on my MVC3 site. I'd appreciate an explanation if someone wouldn't mind? Many thanks.

Original source