Asp.net mvc 引导日期时间选择器不工作
我对使用Javascript和Jquery非常陌生。 我想在我的页面中有一个日期时间选择器，比如 根据网站上提供的例子，我在我看来做了如下的事情Asp.net mvc 引导日期时间选择器不工作,asp.net-mvc,asp.net-mvc-4,datetimepicker,Asp.net Mvc,Asp.net Mvc 4,Datetimepicker,我对使用Javascript和Jquery非常陌生。 我想在我的页面中有一个日期时间选择器，比如 根据网站上提供的例子，我在我看来做了如下的事情 @model AdminPortal.Areas.Module.Models.CreateModule @{ ViewBag.Title = "Create"; Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml"; } @section Datetime { <l
@model AdminPortal.Areas.Module.Models.CreateModule
@{
ViewBag.Title = "Create";
Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
@section Datetime
{
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
}
@Html.ValidationSummary(true)
<fieldset class="form-horizontal">
<legend>Add a Module <small>Create</small></legend>
@using (Html.BeginForm("Register", "Account", FormMethod.Post))
{
@Html.ValidationSummary(true)
<div class ="controls">
<div class="input-block-level">@Html.TextBoxFor(model => model.ModuleId, new {@placeholder = "ModuleID"})</div>
<br/>
<div id="datetimepicker2" class="input-append date">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker2').datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
language: 'en',
pick12HourFormat: true
});
});
</script>
</div>
}
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</fieldset>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/content/css?v=ET1xq_odr_02rFvcXxOEUbE0fxUwGVELEaefDHmcVCk1" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-2.0.2.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.min.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml">Sorama</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Module <b class='caret'></b></a><ul class="dropdown-menu"><li><a href="/hardware/moduletype/moduletypelist">Module Type</a></li><li><a href="/modulekind/modulekindlist">Module Kind</a></li></ul></li><li><a href="/account/login">Hardware</a></li><li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Profile <b class='caret'></b></a><ul class="dropdown-menu"><li><a href="/layouts/marketing">Change Password</a></li><li><a href="/account/register">Add User</a></li><li><a href="/layouts/signin">Logout</a></li></ul></li>
</ul>
Welcome demo
</div>
</div>
</div>
</div>
<div class="container">
<fieldset class="form-horizontal">
<legend>Add a Module <small>Create</small></legend>
<form action="/Hardware/Account/Register" method="post"> <div class ="controls">
<div class="input-block-level"><input data-val="true" data-val-required="The ModuleId field is required." id="ModuleId" name="ModuleId" placeholder="ModuleID" type="text" value="" /></div>
<br/>
<div class ="input-block-level"><select data-val="true" data-val-required="The SelectedModuleTypeName field is required." id="SelectedModuleTypeName" name="SelectedModuleTypeName"><option value="1">WebcamType</option>
<option value="2">DMADAQType</option>
<option value="3">ScanMModuleRack</option>
<option value="4">CamModuleRack</option>
<option value="5">MicrophoneArray8X8Type</option>
<option value="6">ManualMotionSystem</option>
<option value="7">AutomaticMotionSystem</option>
</select></div>
<br/>
<div id="datetimepicker2" class="input-append date">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"/>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker2').datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
language: 'en',
pick12HourFormat: true
});
});
</script>
</div>
</form> <div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<a class="btn " href="/Hardware/Module/Index">Cancel</a>
</div>
</fieldset>
<div>
<a href="/Hardware">Back to List</a>
</div>
<hr>
<footer>
<p>© Sorama 2013</p>
</footer>
</div>
<script src="/Scripts/jquery-2.0.2.js"></script>
<script src="/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</body>
</html>
创造
-
欢迎演示
添加模块创建
网络摄像机类型
DMADAQType
扫描模架
CamModuleRack
麦克风阵列8x8型
手动运动系统
自动运动系统
$（文档）.ready（函数（）{
$（'#datetimepicker2'）。datetimepicker({
格式：'MM/dd/yyyy hh:MM:ss'，
语言:"en",，
pick12HourFormat:true
});
});
保存更改
&抄袭；索拉玛2013
<div id="datetimepicker2" class="input-append date">
$('#datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en',
pick12HourFormat: true
});
我也有这个问题：
<div class="width_full" id="agendar" style="display:none; text-align: right;">
<label for="resume" style="font-size: 18px;">Agendar para:</label>
<input type="text" value="2012-05-15 21:05" name="schedule" id="form_datetime">
<script type="text/javascript">
$("#form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>
</div>
Agendar第段：
$（“#form_datetime”）.datetimepicker（{格式：'yyyy-mm-dd-hh:ii'）；
没有在html中显示…没有，我得到的datetimepicker是我在问题中发布的图片。我通过模块示例页面中指向js和css文件的链接检查您的代码，它工作正常。检查项目中的所有自定义js文件。这很奇怪，我的文件与您的完全相同。而且它不在我的应用程序中运行。我甚至在我使用的布局中呈现了该部分。您能在某处发布呈现页面吗？包含两次Jquery文件。删除一个并确保所有脚本都在它之后调用了jquery。对我来说，问题是我的div id和javascript中的名称不匹配。另外，我在不知不觉中添加了两次Jquery文件。检查您是否有相同的问题请参阅此链接：May is可以帮助您
$('#datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en',
pick12HourFormat: true
});
<div class="width_full" id="agendar" style="display:none; text-align: right;">
<label for="resume" style="font-size: 18px;">Agendar para:</label>
<input type="text" value="2012-05-15 21:05" name="schedule" id="form_datetime">
<script type="text/javascript">
$("#form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>
</div>