0

私は Javascript と Jquery を使用するのが初めてです。ここのように私のページにdatetimepickerを入れたいです（英語の2番目の例）

サイトで提供されている例に基づいて、私は以下のようなことをしました

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

2 に答える 2

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
                });
于 2013-06-25T12:27:34.467 に答える