MVC 中的 DateTimePicker 使用 JQuery-UI

Question

在我的 mvc 应用程序中，我需要一个日期时间选择器。我从 Here.

那里得到了一个代码

所以我首先参考这些 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

请查看下方link

code.runnable.com

 $(function() {
    $('#basic_example_1').datetimepicker({

        controlType : 'select',
        /*
         * timeFormat Default: "HH:mm", A Localization Setting - String of
         * format tokens to be replaced with the time.
         */
        timeFormat : "hh:mm tt",

    });
});

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

Answer 2

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

Answer 3

终于可以正常使用了。工作代码是，

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

而且，它给出的输出如下，

感谢大家。

MVC 中的 DateTimePicker 使用 JQuery-UI

DateTimePicker in MVC using JQuery-UI

asp.net-mvc

jquery

jquery-ui

datetimepicker

asp.net-mvc-5