TimePicker 剃须刀 ASP.NET-MVC

Question

我正在尝试在我的 bootstrap 网站中使用 Razor 和 JQueryUI 创建一个 TimePicker。我创建了一个 DatePicker，我知道我可以用 JQuery 创建一个 DateTimePicker，但我不想 select 日期和时间在一起，我想 select 它与两个不同的文本框。

所以我看了很多教程，但它们都创建了一个 DateTimePicker，当我尝试创建一个具有相同格式的 TimePicker 时，这对我不起作用。

这是我的代码：

JavaScript:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#datepicker').datepicker({
            showOptions: { speed: 'fast' },
            changeMonth: false,
            changeYear: false,
            dateFormat: 'dd/mm/yy',
            gotoCurrent: true
        });
        $('#timepicker').timepicker();
    });  
</script>

剃须刀和Html：

    @using (Html.BeginForm())
    {
        @Html.TextBox("date", DateTime.Now.ToShortDateString(), new { @id = "datepicker", @readonly = "readonly", @style = "width:250px;" })
        <br />
        @Html.TextBox("time","-- Select Time --", new { @id = "timepicker", @readonly = "readonly", @style = "width:250px;" })
    }

谢谢！ :)

Answer 1

jQuery-UI 时间选择器控制需要插件。

在此处查看：https://jsfiddle.net/dmc55erf/8/

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
    <script src="https://code.jquery.com/jquery-2.2.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css" type="text/css" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#datepicker').datepicker({
                showOptions: { speed: 'fast' },
                changeMonth: false,
                changeYear: false,
                dateFormat: 'dd/mm/yy',
                gotoCurrent: true
            });
            $('#timepicker').timepicker();
        });
    </script>

TimePicker 剃须刀 ASP.NET-MVC

TimePicker Razor ASP.NET-MVC

javascript

asp.net-mvc

jquery

timepicker

razor