使用JQuery-UI在MVC中使用DateTimePicker

Question

在我的mvc应用程序中,我需要一个datetimepicker.我从这里得到了一个代码.

所以首先我引用这些js和css文件.

    <script src="~/Scripts/jquery-1.9.0.min.js"></script>
        <script src="~/Scripts/jquery-ui.min.js"></script>
        <script src="~/Scripts/jquery-ui-timepicker-addon.js"></script>
<link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" />

然后,

<div>
@Html.TextBox("fromdate", DateTime.Now.ToString("MM/dd/yyyy HH:mm"), new { @class = "from-date-picker", @readonly = "readonly" })
</div>

并在脚本中,

$('.from-date-picker').datetimepicker({
            dateFormat: 'mm/dd/yy',
            timeFormat: 'hh:mm',
            timeInput: true,
            stepHour: 1,
            stepMinute: 5                
        });

所以我得到了这样的日期时间选择器.

但是这里时间是通过使用滑块来选择的.我试图让它像下面的类型.

所以尝试了这样.

$('.from-date-picker').datetimepicker({
    controlType: 'select',
    oneLine: true,
    timeFormat: 'hh:mm tt'
});

但它仍然像旧式一样.那是滑块.如何更改为第二种类型？

Answer 1

我用example创建了 jsfiddle 。

一切都像魅力一样。

我想你只是不添加一些js或CSS。这是我添加的内容：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-sliderAccess.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script>