programing

ui 부트스트랩 datepicker footer angularjs 제거방법

starjava 2023. 10. 19. 21:48
반응형

ui 부트스트랩 datepicker footer angularjs 제거방법

참고 : 이 글에서 답을 찾을 수 있습니다: 각도 ui 부트스트랩 날짜 선택기에서 바닥글 제거

아래와 같이 생년월일 필드에 ui-bootstrap data picket을 사용하고 있습니다.

<input type="text" data-datepicker-popup="dd-MMMM-yyyy" data-show-weeks="false" data-ng-model="model.dateOfBirth" id="dateOfbirth" name="dateOfBirth">

잘 작동하고 있습니다. 아래와 같이.

enter image description here

그래서 제 질문은 어떻게 하면 날짜 선택기의 바닥글을 숨길 수 있을까요?

미리 감사드립니다..

다음과 같이 전역적으로 수행할 수 있습니다.

myApp.config(function (datepickerConfig, datepickerPopupConfig) {
    // datepickerConfig.showWeeks = false;
    // datepickerPopupConfig.toggleWeeksText = null;
    datepickerPopupConfig.showButtonBar = false;
});

또는 다음과 같은 특정 날짜 선택 인스턴스에 대해 수행할 수 있습니다.

<input type="text" ng-model="dt" show-button-bar="false" />

같은 걸 찾으면서 다음과 같은 답을 찾았습니다.

Angular-ui bootstrap datepicker에서 week column and button 제거

그래서:

angular.module('app', ['ui.bootstrap'])
  .config(function (datepickerConfig) {
      datepickerPopupConfig.showButtonBar = false;
    });

- "ui-bootstrap-tpls-[version]"을 다운로드하면 지시문 템플릿이 JS에 포함됩니다.min.js" 파일입니다.

미니드 버전은 수정이 어려울 수 있으니, 미니드 버전을 확인해보시기 바랍니다.

그러나 기본적으로 @ https://github.com/angular-ui/bootstrap/blob/master/template/datepicker/popup.html 에서 찾을 수 있는 HTML 코드를 찾고 있습니다.

JS 파일에서 그 비트를 찾으면 원하는 대로 수정합니다.

그것은 조용히 그것에 대한 나쁜 해결책이지만, 나는 문서에서 가능한 해결책을 보지 못했습니다.CSS로 숨길 수 있는 방법은 다음과 같습니다.

[ng-controller="DatepickerDemoCtrl"] > hr ~ button { display:none }

당신이 또한 숨기고 싶을 때.<hr>:

[ng-controller="DatepickerDemoCtrl"] > hr { display:none }

DatepickerDemoCtrl을 컨트롤러로 대체합니다.

당신의 문제는 아주 간단합니다.각도 부트스트랩 모듈에서 datepickerPopupWrap 지시문을 수정할 수 있습니다.템플릿 URL 필드를 찾을 수 있습니다.이런 거.

templateUrl:template/datepicker/popup.html,

해당 필드를 템플릿으로 바꾸기만 하면 됩니다.

        ^<ul class=\^dropdown-menu\^ ng-style=\^{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}\^ class=\^dropdown-menu\^>\n^ +
        ^   <li ng-transclude></li>\n^ +
        ^</ul>^,

참고: ^을 "로 대체합니다. 스택 오버플로는 블록 인용문으로 사용하므로 ^을 사용했습니다.


template 필드는 브라우저에서 출력을 표시하는 방법을 정의합니다.자신의 요소를 포함시켜 원하는 대로 수정할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/19030675/how-to-remove-ui-bootstrap-datepicker-footer-angularjs

반응형