web-dev-qa-db-ja.com

Angular bootstrap datepickerの日付形式はng-model値をフォーマットしません

bootstrapアプリケーションでangular date-pickerを使用しています。ただし、バインドされている日付ピッカーの基になるng-modelから日付を選択すると、そのng-modelが1つの日付形式「MM/dd/yyyy」で更新されます。しかし、それは毎回このような日付を作ります

"2009-02-03T18:30:00.000Z"

の代わりに

02/04/2009

同じ plunkrリンク のplunkrを作成しました

私のHtmlとコントローラーコードは以下のようなものです

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
    <p>above filter will just update above UI but I want to update actual ng-modle</p>


    <h4>Popup</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control"
              datepicker-popup="{{format}}" 
              ng-model="dt"
              is-open="opened" min-date="minDate"
              max-date="'2015-06-22'" 
              datepicker-options="dateOptions" 
              date-disabled="disabled(date, mode)" 
              ng-required="true" close-text="Close" />
              <span class="input-group-btn"> 
                <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
    <!--<div class="row">
        <div class="col-md-6">
            <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
        </div>
    </div>-->

    <hr />
    {{dt}}
</div>
  </body>
</html>

角度コントローラー

angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope) {


  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };


  $scope.format = 'dd-MMMM-yyyy';
};

私の質問をレビューしてくれてありがとう。

UPDATE

私は私のデータを投稿するためのメソッドを以下で呼び出していますが、VARは日付ピッカー変数を含むサイズ900の配列です。

public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {

        var query = this.EntityQuery.from('SaveFormData').withParameters({
            $method: 'POST',
            $encoding: 'JSON',
            $data: {
                VAR: formToSave.VAR,
                X: formToSave.X,
                CurrentForm: formToSave.currentForm,
            }
        });

        var deferred = this.q.defer();

        this.manager.executeQuery(query).then((response) => {
            deferred.resolve(response);
        }, (error) => {
                deferred.reject(error);
            });

        return deferred.promise;
    }
angularjsdatepickerangular-uiangular-ui-bootstrapangular-ngmodel
62
Jenish Rabadiya

同様の回答が掲載されていますが、私にとって最も簡単でクリーンな修正と思われるものに貢献したいと思います。 AngularUI datepickerを使用しており、ng-Modelの初期値がフォーマットされていない場合、次のディレクティブをプロジェクトに追加するだけで問題が修正されます：

angular.module('yourAppName')
.directive('datepickerPopup', function (){
    return {
        restrict: 'EAC',
        require: 'ngModel',
        link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
  }
}
});

Github AngularUI issues でこの解決策を見つけたので、すべてのクレジットはあそこの人々に与えられます。

102
stefan2k

以下に示すように$ parsersを使用できますが、これで解決しました。

window.module.directive('myDate', function(dateFilter) {
  return {
    restrict: 'EAC',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.Push(function(viewValue) {
        return dateFilter(viewValue,'yyyy-MM-dd');
      });
    }
  };
});

HTML：

<p class="input-group datepicker" >
  <input
     type="text"
     class="form-control"
     name="name"
     datepicker-popup="yyyy-MM-dd"
     date-type="string"
     show-weeks="false"
     ng-model="data[$parent.editable.name]" 
     is-open="$parent.opened"
     min-date="minDate"
     close-text="Close"
     ng-required="{{editable.mandatory}}"
     show-button-bar="false"
     close-on-date-selection="false"
     my-date />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openDatePicker($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>
23
Rishab777

私は同じ問題にぶつかり、数時間のログ記録と調査の後、それを修正しました。

日付ピッカーで値が初めて設定されたとき、$ viewValueは文字列であるため、dateFilterがそのまま表示することが判明しました。私がしたことは、それをDateオブジェクトに解析することだけです。

Ui-bootstrap-tplsファイルでそのブロックを検索します

  ngModel.$render = function() {
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

それを次のように置き換えます。

  ngModel.$render = function() {
    ngModel.$viewValue = new Date(ngModel.$viewValue);
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

うまくいけば、これが役立ちます:)

13
christina

datepicker-popupで指定されるformatは、単に表示される日付の形式です。基になるngModelはDateオブジェクトです。表示しようとすると、デフォルトの標準に準拠した表現として表示されます。

ビューでdateフィルターを使用して、必要に応じて表示するか、コントローラーで解析する必要がある場合は、コントローラーに$filterを挿入し、$filter('date')(date, format)として呼び出すことができます。 date filter docs もご覧ください。

9
link

Datepickerディレクティブ内で値を選択した後、フォーマッターを使用できます。例えば

angular.module('foo').directive('bar', function() {
    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            ctrl.$formatters.Push(function(value) {
                if (value) {
                    // format and return date here
                }

                return undefined;
            });
        }
    };
});

LINK 。

5
Miraage

非常に多くの回答がすでに書かれているので、ここに私の見解を示します。

Angular 1.5.6＆ui-bootstrap 1.3.3で、これをモデルに追加するだけで完了です。

ng-model-options="{timezone: 'UTC'}"

注：これは、日付が1日遅れで、T00：00：00.000Zの余分な時間に煩わされないことが懸念される場合にのみ使用します

ここでPlunkrを更新しました：

http://plnkr.co/edit/nncmB5EHEUkZJXRwz5QI?p=preview

4
Abdul Rehman Sayed

提案された解決策はすべてうまくいきませんでしたが、最も近いものは@Rishiiからのものでした。

AngularJS 1.4.4とUI Bootstrap 0.13.3を使用しています。

.directive('jsr310Compatible', ['dateFilter', 'dateParser', function(dateFilter, dateParser) {
  return {
    restrict: 'EAC',
    require: 'ngModel',
    priority: 1,
    link: function(scope, element, attrs, ngModel) {
      var dateFormat = 'yyyy-MM-dd';

      ngModel.$parsers.Push(function(viewValue) {
        return dateFilter(viewValue, dateFormat);
      });

      ngModel.$validators.date = function (modelValue, viewValue) {
        var value = modelValue || viewValue;

        if (!attrs.ngRequired && !value) {
          return true;
        }

        if (angular.isNumber(value)) {
          value = new Date(value);
        }

        if (!value) {
          return true;
        }
        else if (angular.isDate(value) && !isNaN(value)) {
          return true;
        }
        else if (angular.isString(value)) {
          var date = dateParser.parse(value, dateFormat);
          return !isNaN(date);
        }
        else {
          return false;
        }
      };
    }
  };
}])
3
Ludovic Guillaume

これを修正するには、JSPファイルに以下のコードを追加します。現在、モデルとUIの値は同じです。

<div ng-show="false">
    {{dt = (dt | date:'dd-MMMM-yyyy') }}
</div>
1
Rajesh Dave

Ng-modelのデフォルトの日付形式を変更する手順

さまざまな日付形式については、jqueryui datepickerの日付形式の値をここで確認してください。たとえば、dd/mm/yyを使用しました

Angularjsディレクティブを作成します

angular.module('app', ['ui.bootstrap']).directive('dt', function () {
return {
    restrict: 'EAC',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        ngModel.$parsers.Push(function (viewValue) {
           return dateFilter(viewValue, 'dd/mm/yy');
        });
    }
 }
});

DateFilter関数を書く

function dateFilter(val,format) {
    return $.datepicker.formatDate(format,val);
}

HTMLページでng-modal属性を記述します

<input type="text" class="form-control" date-type="string"  uib-datepicker-popup="{{format}}" ng-model="src.pTO_DATE" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-button-bar="false" show-weeks="false" dt />
1
Sumit Jambhale

Datepicker（およびdatepicker-popup）ディレクティブでは、ng-modelがDateオブジェクトであることが必要です。これは文書化されています here 。

Ng-modelを特定の形式の文字列にしたい場合は、ラッパーディレクティブを作成する必要があります。次に例を示します（ Plunker ）：

(function () {
    'use strict';

    angular
        .module('myExample', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
        .controller('MyController', MyController)
        .directive('myDatepicker', myDatepickerDirective);

    MyController.$inject = ['$scope'];

    function MyController ($scope) {
      $scope.dateFormat = 'dd MMMM yyyy';
      $scope.myDate = '30 Jun 2017';
    }

    myDatepickerDirective.$inject = ['uibDateParser', '$filter'];

    function myDatepickerDirective (uibDateParser, $filter) {
        return {
            restrict: 'E',
            scope: {
                name: '@',
                dateFormat: '@',
                ngModel: '='
            },
            required: 'ngModel',
            link: function (scope) {

                var isString = angular.isString(scope.ngModel) && scope.dateFormat;

                if (isString) {
                    scope.internalModel = uibDateParser.parse(scope.ngModel, scope.dateFormat);
                } else {
                    scope.internalModel = scope.ngModel;
                }

                scope.open = function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    scope.isOpen = true;
                };

                scope.change = function () {
                    if (isString) {
                        scope.ngModel = $filter('date')(scope.internalModel, scope.dateFormat);
                    } else {
                        scope.ngModel = scope.internalModel;
                    }
                };

            },
            template: [
                '<div class="input-group">',
                    '<input type="text" readonly="true" style="background:#fff" name="{{name}}" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="internalModel" is-open="isOpen" ng-click="open($event)" ng-change="change()">',
                    '<span class="input-group-btn">',
                        '<button class="btn btn-default" ng-click="open($event)">&nbsp;<i class="glyphicon glyphicon-calendar"></i>&nbsp;</button>',
                    '</span>',
                '</div>'
            ].join('')
        }
    }

})();
<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body ng-app="myExample">
    <div ng-controller="MyController">
      <p>
        Date format: {{dateFormat}}
      </p>
      <p>
        Value: {{myDate}}
      </p>
      <p>
        <my-datepicker ng-model="myDate" date-format="{{dateFormat}}"></my-datepicker>
      </p>
    </div>
  </body>

</html>
0
user147677

バグを回避するための新しいディレクティブを定義することは、実際には理想的ではありません。

日付ピッカーは後の日付を正しく表示するため、1つの簡単な回避策は、最初にモデル変数をnullに設定し、しばらくしてから現在の日付に設定することです。

$scope.dt = null;
$timeout( function(){
    $scope.dt = new Date();
},100);
0
gm2008

最後に、上記の問題を回避しました。角度ストラップは、私が期待しているのとまったく同じ機能を備えています。 date-format="MM/dd/yyyy" date-type="string"を適用するだけで、所定の形式でng-modelを更新するという期待される動作が得られました。

<div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
        <input type="text"  autoclose="true"  class="form-control" ng-model="selectedDate" name="date" date-format="MM/dd/yyyy" date-type="string" bs-datepicker>
      </div>
      <hr>
      {{selectedDate}}
     </form>
</div>

ここで働いているプラ​​ンク リンク

0
Jenish Rabadiya

上記の答えを確認した後、私はこれを思いつき、あなたのマークアップに余分な属性を追加することなく完全に機能しました

angular.module('app').directive('datepickerPopup', function(dateFilter) {
    return {
        restrict: 'EAC',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ngModel.$parsers.Push(function(viewValue) {
                return dateFilter(viewValue, 'yyyy-MM-dd');
            });
        }
    }
});
0
Dennis Mwangangi