我正在使用引导程序 datetimepicker库，如下所示：
@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="StartDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="datetimepicker2" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="EndDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
@Html.Bootstrap().SubmitButton().HtmlAttributes(new { @class = "btn" })
</div>
}
这是另一个尝试：
@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
@Html.Bootstrap().TextBoxFor(model => model.StartDate).HtmlAttributes(new { id = "datetimepicker1", @class = "input-append date" }).AppendIcon("icon-calendar")
@Html.Bootstrap().TextBoxFor(model => model.EndDate).HtmlAttributes(new { id = "datetimepicker2", @class = "input-append date" }).AppendIcon("icon-calendar")
@Html.Bootstrap().SubmitButton().HtmlAttributes(new { @class = "btn" })
</div>
}
查询：
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
使用 div 的第一段代码在选择日期和时间时可以正常工作。但是具有剃刀语法的第二个没有。
当使用第一个块选择日期和时间时，按下按钮时它不会发布到服务器。
该模型仅包含 2 个日期：
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
有谁看到我在这里可能做错了什么？
编辑
在使用 Razor 语法时“它不起作用”，datetimepicker 只是没有出现，什么也没发生。现在我一直在进一步测试，我在 datetimepicker.min.js 文件中得到一个指向这一行的运行时错误：
offset.top=offset.top+this.height;
这是它在对话框中弹出的错误消息：
http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js中第 26 行第 5290 列的未处理异常
0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“顶部”
这是表单的呈现 html：
<form action="/Home/Search" method="post"> <div id="searchContainer">
<select class="chzn-select" data-placeholder="Select items" id="Ids" multiple="multiple" name="Ids"><option value="1">test0</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
<option value="5">test4</option>
<option value="6">test5</option>
</select>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="datetimepicker1" name="StartDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="datetimepicker2" name="EndDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<button class="btn btn" type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
<style type="text/css">
#searchContainer {
margin-top:10%;
}
</style>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>