Question

我很擅长使用Javascript和Jquery。我希望在我的页面中有一个datetimepicker，如here(second example with english language)

根据网站提供的示例，我在视图中做了类似的事情

@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>

目前这是我得到的

enter image description here

我在做什么有什么问题？我怎样才能将我到达控制器的价值传递给我？

Edit: Rendered web page and source

enter image description here

浏览器上的页面来源

<!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>&copy; 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>

Answer 1

容器ID

<div id="datetimepicker2" class="input-append date">

与js代码ID匹配：

 $('#datetimepicker').datetimepicker({

请纠正其中一项：

                $('#datetimepicker2').datetimepicker({
                    format: 'dd/MM/yyyy hh:mm:ss',
                    language: 'en',
                    pick12HourFormat: true
                });

Answer 2

我也遇到了这个问题：

<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>

不会出现在HTML ...

Bootstrap日期时间选择器无法正常工作

2 个答案: