使用JQuery UI在MVC中使用DateTimePicker

在我的mvc应用程序中，我需要一个日期时间选择器。我从你那里得到了一个密码

首先我引用这些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" />

所以我有一个这样的约会时间选择器

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

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

所以我试着这样做

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

---

但它还是像旧式一样来了。这就是滑块。如何更改为第二种类型？

请查看下面的链接

这段代码在这里工作正常。

我使用创建JSFIDLE

一切都很有魅力

我想你只是没有添加一些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>

---

现在终于可以正常工作了。工作代码是

    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-timepicker-addon.js"></script>
    <link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-ui-sliderAccess.js"></script>
    
<div>
    <input type="text" value="" id="from-date-picker" />
</div>  

    <script>
        $('#from-date-picker').datetimepicker({
                    controlType: 'select',
                    oneLine: true,
                    timeFormat: 'HH:mm'
                });
    </script>

$（“#来自日期选择器”）.datetimepicker({
controlType:'选择'，
一句话：没错，
时间格式：“HH:mm”
});

而且，它给出的输出是

---

感谢大家。

难道你没有为这种布局添加

css

文件吗？@teovankot:我已经添加了jquery ui.css。我已经在github上检查过了。src包括时间选择器。你加了吗？@teovankot:谢谢。刚才我在我的项目中添加了“jquery ui timepicker addon.css”。但问题还是一样。你清除浏览器缓存了吗？耶。但是我在我的应用程序中使用相同的代码以及相同的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>

    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-timepicker-addon.js"></script>
    <link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-ui-sliderAccess.js"></script>
    
<div>
    <input type="text" value="" id="from-date-picker" />
</div>  

    <script>
        $('#from-date-picker').datetimepicker({
                    controlType: 'select',
                    oneLine: true,
                    timeFormat: 'HH:mm'
                });
    </script>