1

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.

Jeff Finn
  • 1,975
  • 6
  • 23
  • 52

2 Answers2

1

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for pointing that out to me, I had assumed that the button panel was the left / right buttons up the top. So now the question should be why is the top messed up for my code. I would imagine that this is a styling issue ? – Jeff Finn Jun 11 '13 at 12:38
  • 1
    @JeffFinn: You are welcome! I suppose that you have some CSS conflicts, but your question don't contains enough information to reproduce the problem. – Oleg Jun 11 '13 at 12:49
  • Thanks, I'll have a quick play around with the css as far as I know we arn't using any custom css I remember seeing an autosize function somewhere for either jqgrid or datepicker. If that doesn't work. I'll try and figure out a better way of giving the required info to reproduce. I have to learn how to use that jsfiddle site – Jeff Finn Jun 11 '13 at 13:03
0

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.

Jeff Finn
  • 1,975
  • 6
  • 23
  • 52