2

我正在努力了解如何将 TimePicker http://trentrichardson.com/examples/timepicker/解决方案与我现有的使用 DatePicker 的 ASP.Net MVC3 C# 站点相结合。DatePicker 目前运行良好，但我需要添加时间和日期，TimePicker 看起来非常适合我的需要，只是我不确定如何实现它。

我看到这个例子给出了这个代码：

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

但我不确定如何将它应用到我现有的站点/ DatePicker 函数中。

我已确保将这些 JS 文件包含在 _Layout 页面的 HEAD 部分中，并将 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 一起使用。

如果有人不介意，我会很感激解释？

非常感谢。

4

1 回答 1

6

您只需在视图中替换您的datepicker调用datetimepicker并为两者提供必要的参数：

<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>
于 2012-06-26T09:33:21.013 回答