Asp.net mvc 引导日期时间选择器不工作_Asp.net Mvc_Asp.net Mvc 4_Datetimepicker

Asp.net mvc 引导日期时间选择器不工作

asp.net-mvc asp.net-mvc-4

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

我对使用Javascript和Jquery非常陌生。我想在我的页面中有一个日期时间选择器，比如

根据网站上提供的例子，我在我看来做了如下的事情

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


创造



欢迎演示
添加模块创建


网络摄像机类型
DMADAQType
扫描模架
CamModuleRack
麦克风阵列8x8型
手动运动系统
自动运动系统


$（文档）.ready（函数（）{
$（'#datetimepicker2'）。datetimepicker({
格式：'MM/dd/yyyy hh:MM:ss'，
语言:"en",，
pick12HourFormat:true
});
});
保存更改

&抄袭；索拉玛2013

容器id

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