CODEWITHSUNDEEP
jqueryangularjsbootstrap-datepicker
manuel
manuel

Reputation: 81

How can I convert the date format dynamically in angular-bootstrap-datepicker?

I'm using angular-bootstrap-datepicker and need to convert the date format dynamically for either US "mm/dd/yy" or UK "dd/mm/yy". However after updating ng-options the behavior of the pop up calendar is not correct for UK when clicking any date.

I created a jsFiddle and will appreciate any help.

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>

Thanks

Upvotes: 0

Views: 1290

Answers (1)

michelem
michelem

Reputation: 14590

Here is a JSFiddle, I used this gist to add a refresh event to the datepicker, so just add the new module:

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;
        });
    });

And then call $scope.$broadcast('refreshDatepickers'); when needed.

Upvotes: 1

Related Questions