CODEWITHSUNDEEP
jqueryasp.net-mvc-4jqgriddatepickertwitter-bootstrap-rails
Jeff Finn
Jeff Finn

Reputation: 2055

The top of jquery datepicker is not displaying properly

Hi I am having an issue with the button panel in jQuery Datepicker. I am using the date picker in JQGrid and the top of the datepicker is not displaying correctly

Screen Shot

If the button panel displayed correctly I wouldn't care that it's there but its not. My code explicitly sets it to false so it should not be visible.

            {
            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'
                    });
                }
            }
        },

Thanks in advance.

UPDATE The more I look into this problem it is looking like this is a CSS issue, but I can't see any files missing. I'm using MVC4 and my scripts are bundled as follows

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"));
    }
}

and the bundles are called in the following layout

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

The HTML output where the scripts are generated when the code is ran is

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

This code is directly before the tag. From looking at the examples datepicker mine should look a lot neater and be smaller. I checked my custom css by removing it and I still had the same error so I left it out of this post.

Upvotes: 1

Views: 2039

Answers (2)

Jeff Finn
Jeff Finn

Reputation: 2055

This was definatly a css issue, I downloaded a new Jquery Ui theme and selected datepicker and added it to my project. Everything started to work after that and I have a nice new color scheme.

I would imagine that the datepicker css was not included properly in my css but I don't want to go through the css of the base jquery ui and figure out if it was included or not.

Upvotes: 0

Oleg
Oleg

Reputation: 221997

Sorry, but the code which you posted don't contains the button panel. If you would use showButtonPanel: true one would see the bar below the datepicker with buttons "Today" and "Done"

enter image description here

see the demo from "Display Button Bar" part of the Datepicker documentation here. The datepicker on the picture which you posted don't contains the button bar, so all works as expected.

Upvotes: 1

Related Questions