0
Я очень новичок в использовании Javascript и JQuery. Я хочу иметь DateTimePicker в моей странице, как here(second example with english language)Bootstrap date time picker не работает
на основе примера, приведенного на сайте я сделал что-то, как показано ниже, на мой взгляд
@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>
это в настоящее время, что я получаю
Что случилось с тем, что я делаю? И как я могу передать значение, которое я могу получить здесь, к контроллеру?
Edit: Rendered web page and source
источник Страница в браузере
<!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>
Смотрите по этой ссылке: HTTP : //stackoverflow.com/questions/20642668/mvc4-datetimepicker-cannot-find-icon-time-and-icon-calendar может быть, может помочь вам –