Как я могу преобразовать формат даты динамически в angular-bootstrap-datepicker?

Question

Как я могу преобразовать формат даты динамически в angular-bootstrap-datepicker?

0

Я использую angular-bootstrap-datepicker и вам нужно динамически преобразовывать формат даты для "мм/дд/гг" или "дд/мм/гг" в Великобритании. Однако после обновления ng-опций поведение всплывающего календаря неверно для Великобритании при нажатии любой даты.

Я создал jsFiddle и буду признателен за любую помощь.

app = angular.module('demo', ['ng-bootstrap-datepicker']);
app.controller('AppCtrl', function($scope) {
    $scope.datepickerOptions = {
        format: 'mm/dd/yy',
        language: 'en',
        autoclose: true
    }
    $scope.format= "US";
    
    $scope.ukFormat = function (){   	
    //setTimeout(function () {
    //    $scope.$apply(function () {
        $scope.datepickerOptions = {
            format: 'dd/mm/yy',
        } 
   //     });
   // }, 3000);        
        $scope.format = 'UK';
    }

    $scope.usFormat = function (){
    	$scope.datepickerOptions = {
        	format: 'mm/dd/yy',
    	}
        $scope.format = 'US';
    }
});

<link href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<body ng-app="demo">
<div>
        <div data-ng-controller="AppCtrl">
            <input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" data-ng-model="date">

       
<br>
    <button data-ng-click="ukFormat()">UK Format</button>
    <button data-ng-click="usFormat()">US Format</button>
<hr>    
    "Selected format: "{{format}} {{datepickerOptions.format}}
</div> 
</div>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>
</body>

благодаря

manuel 21 авг. 2015, в 18:14

Источник

Теги:

jquery

angularjs

bootstrap-datepicker

1 ответ

Ещё вопросы

michelem · Answer 1 · 2015-08-21T13-31-00.000Z

Вот JSFiddle, я использовал эту суть, чтобы добавить событие обновления в DatePicker, так что просто добавить новый модуль:

angular.module('ui.bootstrap.datepicker')
    .config(function($provide) {
        $provide.decorator('datepickerDirective', function($delegate) {
            var directive = $delegate[0];
            var link = directive.link;

            directive.compile = function() {
                return function(scope, element, attrs, ctrls) {
                    link.apply(this, arguments);

                    var datepickerCtrl = ctrls[0];
                    var ngModelCtrl = ctrls[1];

                    if (ngModelCtrl) {
                        // Listen for 'refreshDatepickers' event...
                        scope.$on('refreshDatepickers', function refreshView() {
                            datepickerCtrl.refreshView();
                        });
                    }
                }
            };
            return $delegate;
        });
    });

А затем вызовите $scope.$broadcast('refreshDatepickers'); при необходимости.

Спасибо, Мишелем, я думаю, что это решение должно работать с ui.bootstrap.datepicker, однако приложение, которое я разрабатываю, имеет ng-bootstrap-datepicker, который сильно отличается. например, функция ссылки в ng-bootstrap-datepicker не имеет аргумента ctrls. Я проверил jsfiddle, который вы любезно предоставили, и после выбора формата в Великобритании и выбора даты в календаре она переходит на другую дату. Вместо этого я оцениваю использование ui.bootstrap.datepicker. Спасибо.