Fatal编程技术网
  • jquery/
  • jquery日期选择器的顶部显示不正确

jquery日期选择器的顶部显示不正确

jquery asp.net-mvc-4 jqgrid

jquery日期选择器的顶部显示不正确,jquery,asp.net-mvc-4,jqgrid,datepicker,twitter-bootstrap-rails,Jquery,Asp.net Mvc 4,Jqgrid,Datepicker,Twitter Bootstrap Rails,您好，我对jQuery Datepicker中的按钮面板有问题。我正在JQGrid中使用日期选择器，并且日期选择器的顶部显示不正确 如果按钮面板显示正确，我不在乎它在那里，但它不是。我的代码将其显式设置为false，因此它不应可见 { name: 'ExpirationDate', index: 'ExpirationDate', editable: true, editrules: { required: true }, editoptions

您好，我对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"));
    }
}
在下面的布局中调用bundle

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


@ViewBag.Title-参考数据管理
@style.Render（“~/content/css/MasterCss”）
@style.Render（“~/content/jquery.jqGrid/jqgridcss”）
@style.Render（“~/content/themes/base/jqueryicss”）
@RenderPage（“~/Views/Shared/_Header.cshtml”）
@渲染页面（“~/Views/Shared/_menu.cshtml”）
@RenderBody（）
@RenderPage（“~/Views/Shared/\u Footer.cshtml”）
@Scripts.Render（“~/Scripts/MasterScripts”）
@RenderSection（“脚本持有者”，false）
@MiniProfiler.RenderIncludes（RenderPosition.Right，false，false，15，true）
运行代码时生成脚本的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矿山应该看起来更整洁、更小。我通过删除自定义css来检查它，但仍然有相同的错误，因此我将其从本文中删除。

对不起，您发布的代码不包含按钮面板。如果使用
showButtonPanel:true
可以看到日期选择器下方的栏中有“今天”和“完成”按钮

请参阅Datepicker文档中“显示按钮栏”部分的演示。您发布的图片上的日期选择器不包含按钮栏，因此一切正常。

对不起，您发布的代码不包含按钮面板。如果使用
showButtonPanel:true
可以看到日期选择器下方的栏中有“今天”和“完成”按钮

请参阅Datepicker文档中“显示按钮栏”部分的演示。您发布的图片上的datepicker不包含按钮栏，因此一切正常。

这确实是一个css问题，我下载了一个新的Jquery Ui主题并选择了datepicker并将其添加到我的项目中。从那以后一切都开始工作了，我有了一个很好的新配色方案

我可以想象datepicker css没有正确地包含在我的css中，但我不想查看基本jquery ui的css，并确定它是否包含在css中。

这确实是一个css问题，我下载了一个新的jquery ui主题，选择datepicker并将其添加到我的项目中。从那以后一切都开始工作了，我有了一个很好的新配色方案

我可以想象datepicker css没有正确地包含在我的css中，但我不想查看基本jquery ui的css，并确定它是否包含在css中。

设置jsfiddler来解决问题。制作一个fiddle demo plz。设置jsfiddler来解决问题。制作一个fiddle demo plz。感谢您向我指出这一点，我假设按钮面板是顶部的左/右按钮。所以现在的问题应该是，为什么我的代码的顶部被弄乱了。我想这是一个造型问题？@JeffFinn:不客气！我想你有一些CSS冲突，但是你的问题没有包含足够的信息来重现这个问题。谢谢，我将快速地使用CSS，因为我知道我们不会使用任何自定义CSS。我记得在某处看到一个用于jqgrid或datepicker的自动调整大小函数。如果那不起作用。我将尝试找出一种更好的方法，提供复制所需的信息。我必须学习如何使用JSFIDLE站点感谢您向我指出，我假设按钮面板是顶部的左/右按钮。所以现在的问题应该是，为什么我的代码的顶部被弄乱了。我想这是一个造型问题？@JeffFinn:不客气！我想你有一些CSS冲突，但是你的问题没有包含足够的信息来重现这个问题。谢谢，我将快速地使用CSS，因为我知道我们不会使用任何自定义CSS。我记得在某处看到一个用于jqgrid或datepicker的自动调整大小函数。如果那不起作用。我将尝试找出一种更好的方法，提供复制所需的信息。我必须学习如何使用JSFIDLE站点