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">
잘 작동하고 있습니다. 아래와 같이.
그래서 제 질문은 어떻게 하면 날짜 선택기의 바닥글을 숨길 수 있을까요?
미리 감사드립니다..
다음과 같이 전역적으로 수행할 수 있습니다.
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
'programing' 카테고리의 다른 글
이미지를 자동으로 잘라내고 가운데로 맞추는 방법 (0) | 2023.10.19 |
---|---|
UI 검색바 검색 텍스트 색상을 변경하려면 어떻게 해야 합니까? (0) | 2023.10.19 |
파이썬에서 대용량 XML 문서를 구문 분석하는 가장 빠른 방법은 무엇입니까? (0) | 2023.10.19 |
SQL Server에서 날짜 시간 필터링의 성능을 향상시키는 방법은 무엇입니까? (0) | 2023.10.19 |
PHP에서 MySQL 테이블 구조를 얻으려면 어떻게 해야 합니까?그리고 모든 테이블의 목록? (0) | 2023.10.19 |