1

こんにちは、jQuery Datepicker のボタン パネルに問題があります。JQGrid で日付ピッカーを使用していますが、日付ピッカーの上部が正しく表示されません

スクリーンショット

ボタンパネルが正しく表示されていれば、そこにあることは気にしませんが、そうではありません。私のコードでは明示的に false に設定されているため、表示されません。

            {
            name: 'ExpirationDate', index: 'ExpirationDate', editable: true, editrules: { required: true }, editoptions: {
                dataInit: function (el) {
                    $(el).datepicker({
                        showButtonPanel: false,
                        dateFormat: "dd-mm-yy",
                        changeYear: true,
                        changeMonth: true,
                        minDate: '+2D'
                    });
                }
            }
        },

前もって感謝します。

更新 この問題を詳しく調べると、これは CSS の問題のように見えますが、欠落しているファイルは見当たりません。私は MVC4 を使用しており、スクリプトは次のようにバンドルされています

using System.Web.Optimization;

public static class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/content/css/MasterCss")
            .Include("~/content/bootstrap.css")
            .Include("~/content/bootstrap-responsive.css")
            .Include("~/content/css/site.css"));

        bundles.Add(new StyleBundle("~/content/jquery.jqGrid/jqgridcss")
            .Include("~/content/jquery.jqGrid/ui.jqgrid.css"));

        bundles.Add(new StyleBundle("~/content/themes/base/jqueryuicss")
            .Include("~/content/themes/base/jquery.ui.theme.css")
            .Include("~/content/themes/base/jquery.ui.css"));

        bundles.Add(new ScriptBundle("~/Scripts/MasterScripts")
            .Include("~/Scripts/jquery-{version}.js")
            .Include("~/Scripts/jquery-ui-{version}.js")
            .Include("~/Scripts/i18n/grid.locale-en.js")
            .Include("~/Scripts/jquery.jqGrid.js")
            .Include("~/Scripts/bootstrap.js"));

        bundles.Add(new ScriptBundle("~/Scripts/Validation")
            .Include("~/Scripts/jquery.validate.js")
            .Include("~/Scripts/jquery.validate.unobtrusive.js")
            .Include("~/Scripts/App/referencedata.validation.js"));

        bundles.Add(new ScriptBundle("~/Scripts/Index")
            .Include("~/Scripts/App/splash.js"));
    }
}

バンドルは次のレイアウトで呼び出されます

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8" />
     <title>@ViewBag.Title - ReferenceDataManagement </title>
     @Styles.Render("~/content/css/MasterCss")
     @Styles.Render("~/content/jquery.jqGrid/jqgridcss")
     @Styles.Render("~/content/themes/base/jqueryuicss")

</head>
<body>
    <div class="container" style="max-width: 100% ;min-width: 1235px">
        <div class="row"> @RenderPage("~/Views/Shared/_Header.cshtml") </div>
        <div class="row"> @RenderPage("~/Views/Shared/_menu.cshtml") </div>
        <div class="row"> @RenderBody() </div>
        <div class="row"> @RenderPage("~/Views/Shared/_Footer.cshtml") </div>
    </div>
    @Scripts.Render("~/Scripts/MasterScripts")    
    @RenderSection("scriptholder", false)

    @MiniProfiler.RenderIncludes(RenderPosition.Right, false, false, 15, true)
</body>
</html>

コードの実行時にスクリプトが生成される HTML 出力は次のとおりです。

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.1.js"></script>
<script src="/Scripts/i18n/grid.locale-en.js"></script>
<script src="/Scripts/jquery.jqGrid.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/App/CodeListGrid.js" type="text/javascript"></script>
<script async type="text/javascript" id="mini-profiler" src="/mini-profiler-resources/includes.js?v=xwYPDDH1blvqmxgsBweNC++H7CFU3KGQ+zFcVlJPsXw=" data-version="xwYPDDH1blvqmxgsBweNC++H7CFU3KGQ+zFcVlJPsXw=" data-path="/mini-profiler-resources/" data-current-id="e19ebd5a-9b81-40f9-993a-545cd8dfc3ce" data-ids="e19ebd5a-9b81-40f9-993a-545cd8dfc3ce" data-position="right" data-trivial="false" data-children="false" data-max-traces="15" data-controls="true" data-authorized="true" data-toggle-shortcut="Alt+P" data-start-hidden="false"></script>

このコードは、タグの直前にあります。例を見ると、datepicker mine はよりすっきりと小さく見えるはずです。カスタム css を削除して確認しましたが、それでも同じエラーが発生したため、この投稿から除外しました。

4

2 に答える 2

1

申し訳ありませんが、投稿したコードにはボタン パネルが含まれていません。使用するshowButtonPanel: trueと、日付ピッカーの下に「今日」と「完了」ボタンのあるバーが表示されます

ここに画像の説明を入力

Datepicker ドキュメントの「ボタン バーの表示」部分のデモを参照してください。投稿した写真の日付ピッカーにはボタンバーが含まれていないため、すべて期待どおりに機能します。

于 2013-06-11T12:19:48.787 に答える