Translate Angular-UI DatePicker - text and popup buttons too

You might want to Angular-UI date picker in your own language instead of default english.
Fortunately, guys at Angular-UI team did the job well and used i18n angular system.

All you have to do is to include the correct language pack :

...

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>

<script src="https://code.angularjs.org/1.0.2/i18n/angular-locale_fr-fr.js"></script>

...

There's still the popup action buttons that are not translated.
As stated in the doc, you can configure the text displayed in those buttons by altering the datepickerPopupConfig global object default values :

// INJECT GLOBAL DATE PICKER POPUP CONFIG

var DatepickerDemoCtrl = function ($scope, datepickerPopupConfig) {

...

// TRANSLATION HERE

datepickerPopupConfig.currentText = 'Aujourd\'hui';

datepickerPopupConfig.clearText = 'Effacer';

datepickerPopupConfig.closeText = 'Fermer';

...

}

Here's a Plunkr for demoing purpose.

Hope this help !

Angular JS : Angular-UI modals won't show up with Bootstrap 3

While migrating from Bootstrap 2 to 3 in an angular jS app, realized there was a bug in modals implementation : Angular-UI directive doesn't add a "display block" CSS prop to the built modal, so it will never show up.

To fix it, simply add the following CSS :

/*
FIX ui-bootstrap modals + bootstrap 3

*/
.modal.ui-bootstrap-modal {
  display: block;
}

And open the modals this way :

$scope.openTheModal = function () {
$modal.open({
templateUrl: 'myModalTemplate.html',
scope: $scope,
windowClass: 'ui-bootstrap-modal'
});
};

Here we add a different class from the regular 'modal' class. Reason is : in my app I had both plain Bootstrap3 modals and angular-UI modals. Simply adding display: block property on 'modal' class was breaking regular Bootstrap 3 modals.

Hope this help.