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

Question

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

michelem · Accepted Answer · 2015-08-21 15:54:25Z

1

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.

answered Aug 21, 2015 at 15:54

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

manuel Over a year ago

Thank you Michelem, I think this solution should work with ui.bootstrap.datepicker, however the app I'm developing has ng-bootstrap-datepicker which is quite different. for example the link function in ng-bootstrap-datepicker doesn't not have ctrls argument. I've check the jsfiddle you have kindly provided and after clicking UK format and picking a date in the calendar it jumps to another date. I'm evaluating the use of ui.bootstrap.datepicker instead. Thank you.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related