programing

AngularJS/Angular-ui-bootstrap datePicker에서 사용되는 언어 변경

jooyons 2023. 4. 5. 21:32
반응형

AngularJS/Angular-ui-bootstrap datePicker에서 사용되는 언어 변경

여기에 기재되어 있는 date Picker를 사용하고 있습니다.

그러나 기본적으로는 언어를 변경할 수 있는 직접 옵션은 없습니다.

angular 지시 없이 제공된 위젯의 문서를 찾았는데, 이 문서를 통해 다음과 같은 작업을 수행할 수 있습니다.

http://bootstrap-datepicker.readthedocs.org/en/latest/i18n.html

원래 디렉티브의 소스 코드를 수정하지 않고 쉽게 변경할 수 있는 방법이 있습니까?

DatePicker 형식의 angular-ui를 사용하는 경우 페이지 헤더에 현지화된 js 파일을 추가합니다.예를 들어 다음과 같습니다.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://code.angularjs.org/1.0.8/i18n/angular-locale_fr-fr.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>

여기 작업용 플런커가 있습니다.

먼저 angular in index.html 후에 locals(여기서 취득) 스크립트를 로드해야 합니다.

 <script src="angular.js"></script>
 <script src="angular-locale_de-de.js"></script>

그 후 날짜 및 달은 현지화되지만 날짜 선택자 입력 태그 내에 파라미터를 직접 추가하여 버튼을 변환해야 합니다.

<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy"
ng-model="dt" is-open="opened" min-date="minDate" max-date="'2042-04-02'"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
ng-required="true" 
current-text="Tonight" clear-text="Reset" close-text="Exit" />

이 링크에서 local js 파일의 최신 버전을 찾을 수 있습니다.

https://cdnjs.com/libraries/angular-i18n

또한 날짜 선택 작업 버튼('닫기' 등)을 글로벌하게 변환하는 경우 글로벌 설정에 이 코드를 추가할 수 있습니다.

//DatePicker -> uibDatepickerConfig
//DatePickerPopup -> uibDatepickerPopupConfig
app.config(['uibDatepickerPopupConfig', function(uibDatepickerPopupConfig) {
uibDatepickerPopupConfig.closeText = 'Close';
uibDatepickerPopupConfig.currentText = 'Today';
uibDatepickerPopupConfig.clearText = 'Clear';
}]);

언급URL : https://stackoverflow.com/questions/19671887/angularjs-angular-ui-bootstrap-changing-language-used-by-the-datepicker

반응형