AngularJS：ナビゲータ言語に基づいてブートストラップUI日付ピッカーの日付形式を切り替えます。

Question

私のウェブサイト（英語、スペイン語、ポルトガル語）の利用可能な言語に基づいてブートストラップUIの日付ピッカーをフォーマットしようとしています。

私の見解は次のようになります。

<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> 

そして、私のコントローラ：

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; 

     })(); 

望ましい行動が正しい形式で日付を表示する日付形式のためになります。結局のところ予想通り、これは動作しません。

は、私は何かが足りないのですか？申し訳ありませんが、質問がどこかで答えられた場合、私はこの問題について多くの、多くの質問をチェックし、私のニーズに正確に合うように見えません。

---

@Martijnウェルカーの応答

後に編集質問は、私は（実際のところ、私はすでに持っていた）コントローラに角度ダイナミックロケールを注入し、など$ロケールを呼んでいますこの：

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

    return vm.formatoFecha 
    })(); 

その後、私はちょうどこの（これは "MMM dを、Y" の形式を使用する必要があります）のようにUIB-DatePickerの-ポップアップを使用します。

<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> 

しかし、まだありません。私はコントローラや何かを間違って呼んでいるかどうかわかりません。

Answer 1

右にはAngular localesを含める必要があります。これらをインデックスに含めることも、プラグインを使用して言語スイッチに動的にロードすることもできます（this oneなど）。

プロバイダでlocaleLocationPatternを指定することによって、あなたはまた、CDNからファイルを読み込むことができます。

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

localeがあなたに補間されます（tmhDynamicLocale.set()によって設定された）現在のセットのロケールを