how to use jQuery Timepicker in mvc 3?
本文关键字：mvc in Timepicker to use jQuery how | 更新日期: 2023-09-27 18:21:27
直到我的大脑出血，我仍然无法解决这个问题。我必须在mvc3视图中的文本框上使用jQuery时间选择器。
在我的Layout.cshtml 内部
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Script/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="tabs">
<ul id="menu">
<li id="menu-first-item">
@Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<div id="render">
@RenderBody()
</div>
</div>
</div>
</body>
</html>
Create内部视图：
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
<div id="page-title" class="text-indent">
<h2>
Create new shift</h2>
<div id="Optiontab">
@Html.ActionLink("Browse", "Index")
</div>
</div>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="fieldset">
<div class="editor-label">
@Html.LabelFor(model => model.WorkDuration)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.WorkDuration)
@Html.ValidationMessageFor(model => model.WorkDuration)
</div>
</div>
}
textbos的id为"WorkDuration"。时间选择器不显示。现在，我错过了什么？希望有人能帮忙。谢谢
**
编辑
**
我找到了答案，现在应该可以了：
layout.cshtml 内部
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link type="text/css" href="@Url.Content("~/Content/jquery-ui-titoms.css")" rel="stylesheet" />
<style type="text/css">
#ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-sliderAccess.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#WorkDuration, #AbsentTrigger, #LateTrigger, #StartTime, #EndTime").timepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
showSecond: true,
timeFormat: 'hh:mm:ss'
});
});
</script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
参考：
时间选择器主题不工作
感谢所有回复！！
WorkDuration文本框的命名一定有问题。
但是，如果文本框名称肯定包含WorkDuration，那么jquery属性contains选择器将应用时间选择器。
从下面的评论来看，您可能没有正确引用脚本，Asp.NetMVC将保存javascript文件的文件夹命名为scripts，而您的代码引用的是名为Script的文件夹。
通过将要引用的任何文件从其文件夹拖动到布局页面上，可以确保具有正确的文件夹名称。
我可以使用下面的代码让时间选择器工作。
脚本和CSS：
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
HTML:
<input type="text" id="WorkDuration" name="example_WorkDuration" />
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$('input[name*="WorkDuration"]').timepicker({});
});
</script>
您是否尝试过不使用时间选择器插件，而仅使用日期选择器？
像这样：
$( "#WorkDuration" ).datepicker();
代替：
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
用途：
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').datepicker();
});
</script>
这应该工作
使用这个jquery：jquery.ptTimeSelect.js
时间：
$（document）.ready（function（）｛
var uId = 'ptTimeSelect_' + jQuery.ptTimeSelect._counter;
$("#incidenttime").ptTimeSelect();
$("#incidenttime").click(function () { $.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").focus(function () { jQuery.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").keypress(function (event) {
if (event.keyCode == 13) {
jQuery.ptTimeSelect.setTime();
return false;
}
});
});
我认为这是最好的方法。