如何使用TimePicker到DatePicker MVC3 C＃

Question

我很努力去理解如何將TimePicker http://trentrichardson.com/examples/timepicker/解決方案與我現有的使用DatePicker的ASP.Net MVC3 C＃站點結合起來。 DatePicker目前正在自行開展工作，但我需要添加時間和日期，TimePicker看起來非常適合我需要的東西，但我不確定如何實現它。

我看到的例子給出了這樣的代碼：

$('#example1').datetimepicker(); 

，但我不能確定如何將其工作到我現有的網站/ DatePicker的功能。

我已經確定我包括在_layout頁的HEAD部分這些JS文件，以及添加CSS以我現有的DatePicker CSS文件（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> 

和我查看網頁我有這樣的代碼，顯示輸入和調用的DatePicker功能（能正常工作在其目前的形式）：

@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> 

我不確定如何安裝TimePicker功能，所以它適用於我的MVC3網站上的DatePicker。

如果有人不介意我會感激解釋嗎？

非常感謝。

Answer 1

您只需在視圖datetimepicker更換您的通話datepicker，並提供必要的參數兩種：

<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>