0

脳が出血するまで、この問題を解決することはできません。mvc3-View のテキスト ボックスで jQuery タイムピッカーを使用する必要があります。

私の中でLayout.cshtml 

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Script/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Script/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Script/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>

    <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
    <![endif]-->
</head>
<body>
    <div id="wrap">
       <div id="main">
            <div id="tabs">
                <ul id="menu">
                    <li id="menu-first-item">
                        @Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
            </div>
            <div id="render">
                @RenderBody()
            </div>
        </div>
    </div>
</body>
</html>

ビュー内Create: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#WorkDuration').timepicker({});
    });
</script>
<div id="page-title" class="text-indent">
    <h2>
        Create new shift</h2>
    <div id="Optiontab">
        @Html.ActionLink("Browse", "Index")
    </div>
</div>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="fieldset">
        <div class="editor-label">
            @Html.LabelFor(model => model.WorkDuration)
        </div>

        <div class="editor-field">
            @Html.TextBoxFor(model => model.WorkDuration)
            @Html.ValidationMessageFor(model => model.WorkDuration)
       </div>
   </div>
 }

textbos の ID は「WorkDuration」です。タイムピッカーは表示されません。さて、私が見逃したものは何ですか？誰かが助けてくれることを願っています。ありがとう！

**

編集

**

私は答えを見つけました、これは今うまくいくはずです:

中身layout.cshtml 

<head>
    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
    <link type="text/css" href="@Url.Content("~/Content/jquery-ui-titoms.css")" rel="stylesheet" />

    <style type="text/css">
        #ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }       
    </style>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-sliderAccess.js")"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#WorkDuration, #AbsentTrigger, #LateTrigger, #StartTime, #EndTime").timepicker({
                addSliderAccess: true,
                sliderAccessArgs: { touchonly: false },
                showSecond: true,
                timeFormat: 'hh:mm:ss'
            });
        });
    </script>

    <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
    <![endif]-->
</head>

参照：

タイムピッカーのテーマが機能しない

すべての応答に感謝します!!

4

4 に答える 4

0

WorkDurationテキストボックスの名前に問題があるはずです。

ただし、テキストボックス名に確実にWorkDurationが含まれている場合、jquery属性にセレクターが含まれているとタイムピッカーが適用されます。

以下のコメントから、スクリプトを正しく参照していないようです。Asp.NetMVCは、コードがScriptという名前のフォルダーを参照している間、javascriptファイルを保持するフォルダーにScriptsという名前を付けます。

参照するファイルをフォルダからレイアウトページにドラッグすることで、正しいフォルダ名を使用できるようになります。

以下のコードを使用して、タイムピッカーを機能させることができました。

スクリプトとCSS：

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script> 
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>

HTML：

<input type="text" id="WorkDuration" name="example_WorkDuration" />

JQuery：

<script type="text/javascript">     
     $(document).ready(function () {         
        $('input[name*="WorkDuration"]').timepicker({});
     }); 
</script>
于 2012-01-24T11:15:52.443 に答える
0

それ以外の：

<script type="text/javascript">
    $(document).ready(function () {
        $('#WorkDuration').timepicker({});
    });
</script>

使用する：

<script type="text/javascript">
    $(document).ready(function () {
        $('#WorkDuration').datepicker();
    });
</script>

これはうまくいくはずです

于 2012-01-24T11:20:30.060 に答える
0

timepicker アドオンを使わずに、単に datepicker を使用しましたか?

このような：

  $( "#WorkDuration" ).datepicker();
于 2012-01-24T10:44:59.833 に答える
0

このjqueryを使用してください：jquery.ptTimeSelect.js

時間：

$(document).ready(function () {

    var uId = 'ptTimeSelect_' + jQuery.ptTimeSelect._counter;
    $("#incidenttime").ptTimeSelect();
    $("#incidenttime").click(function () { $.ptTimeSelect.openCntr('' + uId + ''); });
    $("#incidenttime").focus(function () { jQuery.ptTimeSelect.openCntr('' + uId + ''); });
    $("#incidenttime").keypress(function (event) {
        if (event.keyCode == 13) {
            jQuery.ptTimeSelect.setTime();
            return false;
        }
    });
});

私がそう思う最良の方法です。

于 2012-02-14T09:16:39.640 に答える