1

안녕하세요 jQuery Datepicker의 버튼 패널에 문제가 있습니다. 나는 날짜있는 jqGrid에서 선택 도구와 버튼 패널이 제대로 내가 거기 있지만없는 것을 걱정하지 않을 표시하면 날짜 선택기의 상단이 제대로jquery datepicker의 상단이 올바르게 표시되지 않습니다.

Screen Shot을 표시하지 않습니다를 사용하고 있습니다. 내 코드는 명시 적으로 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 문제인 것처럼 보이지만 더 이상 누락 된 파일은 볼 수 없습니다.

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 출력에 호출 될 때 나는 MVC4를 사용하고 있는데 내 스크립트가 번들로 제공됩니다
<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를 확인하고 나는 여전히이 게시물에서 그것을두고 같은 오류가 발생했습니다.

+1

문제를 해결하려면 jsfiddler를 설정하십시오. – Amit

+1

바이올린 데모 게임을 만드십시오. –

답변

0

이것은 분명 CSS 문제였습니다. 새로운 Jquery Ui 테마를 다운로드하고 datepicker를 선택하여 프로젝트에 추가했습니다. 그 후 모든 것이 작동하기 시작했고 멋진 새로운 색 구성표가 있습니다.

나는 datepicker CSS가 제 CSS에 제대로 포함되어 있지 않았지만 기본 jquery UI의 CSS를 살펴보고 포함시키지 않았 으면 좋겠다고 생각합니다.

1

게시 한 코드 에는 버튼 패널이 없습니다. 당신이 showButtonPanel: true을 사용하면 하나의 버튼으로 날짜 선택기 아래 줄

enter image description here

는 날짜 선택기 문서 here의 "디스플레이 버튼 바"부분에서 데모를보고 "완료"를 "오늘"과를 볼 것입니다. 게시 한 그림의 날짜 표시기에는 단추 표시 줄이 없으므로 예상대로 작동합니다.

+0

저를 지적 해 주셔서 고맙습니다. 저는 버튼 패널이 왼쪽/오른쪽 버튼이 위로 향한 것이라고 생각했습니다. 그래서 지금 질문은 왜 내 코드를 엉망으로 만든 것일까 요? 이것이 스타일링 문제라고 생각하겠습니까? –

+1

@ JeffFinn : 환영합니다! CSS 충돌이 있다고 생각되지만 질문에 문제를 재현 할만한 정보가 충분하지 않습니다. – Oleg

+0

고마워, 나는 jssrid 또는 datepicker 어딘가에 autosize 함수를 본 기억이 어떤 사용자 정의 CSS를 사용하여 arn't 알고만큼 CSS로 주위에 놀아 라. 작동하지 않는 경우. 내가 재현 할 수있는 필요한 정보를 제공하는 더 좋은 방법을 찾으려고 노력할 것이다. 그 jsfiddle 사이트를 사용하는 법을 배워야합니다. –

관련 문제