CODEWITHSUNDEEP
angularjsbootstrap-ui
xabi_sides
xabi_sides

Reputation: 334

AngularJS: Switch a Bootstrap UI datepicker date format based on the navigator language

I'm trying to format a Bootstrap UI datepicker based on the available languages of my website (English, Spanish, Portuguese).

My view looks like this:

<div class="row">
    <div class="col-md-5">
        <div class="form-group">
            <label class="control-label" translate="verificar.form.fechanac" for="field_fechanac">Fecha de Nacimiento</label>
            <p class="input-group">
            <input type="text" class="form-control" id="field_fechanac" name="field_fechanac"
            uib-datepicker-popup="{{formatoFecha}}" ng-model="vm.form.fechanac" is-open="data.isOpen" datepicker-options="{showWeeks: false, startingDay: 1, startWeek: 1}" ng-required="true" readonly />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="data.isOpen = true"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
            <div ng-show="verificarForm.fechanac.$invalid">
                <p class="help-block"
                   ng-show="verificarForm.fechanac.$error.required"
                   translate="entity.validation.required">This field is
                    required.</p>
            </div>
        </div>
    </div>
</div>

And my controller:

angular.module('webclientesApp')
    .controller('ValidateController', ValidateController);

ValidateController.$inject = ['$scope', 'Principal', 'ValidateService', '$state', '$window'];

function ValidateController($scope, Principal, ValidateService,  $state, $window) {

$scope.dt = new Date();
var vm = this;
vm.formData = {};
vm.data = {};

vm.formatoFecha = (function formatearFecha(){   
   vm.lenguaje = $window.navigator.language || $window.navigator.userLanguage;
   console.log (vm.lenguaje);
   if (vm.lenguaje === "es"){
      vm.formatoFecha= "dd/MM/yyyy";    
   }else if (vm.lenguaje === "pt-pt"){
      vm.formatoFecha= "MM/dd/yyyy";
       }
    return vm.formatoFecha;

})();

The desired behavior would be for the date form to display the date in the correct format. Turns out, this is not behaving as expected:

enter image description here

Am I missing something? Sorry if the question got answered somewhere, I have checked many, many questions about this issue, and don't seem to fit exactly to my needs.

Question edited after @Martijn Welker's response

I have (As a matter of fact, I already had) injected the angular-dynamic-locale into the controller, and called the $locale like this:

vm.formatoFecha = (function formatearFecha(){   
vm.lenguaje = $locale;
console.log (vm.lenguaje);
vm.formatoFecha = vm.lenguaje.DATETIME_FORMATS.mediumDate;

return vm.formatoFecha
})();

Then I use the uib-datepicker-popup just like this (this should use the "MMM d, y" format):

<div class="row">
    <div class="col-md-5">
      <div class="form-group">
            <label class="control-label" translate="verificar.form.fechanac" for="field_fechanac">Fecha de Nacimiento</label>
            <p class="input-group">
            <input type="text" class="form-control" id="field_fechanac" name="field_fechanac"
            uib-datepicker-popup="{{formatoFecha}}" ng-model="vm.form.fechanac" is-open="data.isOpen" datepicker-options="{showWeeks: false, startingDay: 1, startWeek: 1}" ng-required="true" readonly />
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="data.isOpen = true"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
            <div ng-show="verificarForm.fechanac.$invalid">
                <p class="help-block"
                   ng-show="verificarForm.fechanac.$error.required"
                   translate="entity.validation.required">This field is
                    required.</p>
            </div>
        </div>
    </div>
</div>

But still does not. I don't know if I'm calling incorrectly the controller or something.

Upvotes: 0

Views: 388

Answers (1)

Martijn Welker
Martijn Welker

Reputation: 5605

You have to include the right Angular locales. You can include these in your index or use a plugin to dynamically load them on language switch like this one.

By specifying a localeLocationPattern in the provider you can also load the files from a CDN:

tmhDynamicLocaleProvider.localeLocationPattern(
     'https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/' + angular.version.full + '/angular-locale_{{locale}}.js'
);

locale will be interpolated to you current set locale (set by tmhDynamicLocale.set())

Upvotes: 0

Related Questions