5

ペルシャの日付ピッカー用のAngularディレクティブを作成したい、使用したいJavaScriptライブラリはhttp://jspersiandatepicker.codeplex.com/、私のコードは次のとおりです。

<input type="text" persiandatepicker ng-model="mydate" />{{mydate}}

directive('persiandatepicker', function() {
  return {
      restrict: 'A',
      require: '?ngModel',
      link: function (scope, element, attrs, ngModel) {
          if (!ngModel) return;

          ngModel.$render = function () {
              element.bind("click", function () {
              PersianDatePicker.Show(this, ngModel.$viewValue || '');
          });

      };
   }
};
});

このコードは、入力をクリックすると日付ピッカーを表示し、日付を選択すると入力に表示されますが、モデルはバインドされず、変更されません。このサンプルでバインディングを行うにはどうすればよいですか?? plunker のこのリンクは私のコードです: http://plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview

4

3 に答える 3

3

値が変更されたことを angular に知らせる必要があります。日付ピッカーが _textBox.onchange(); を呼び出しているようです。テキストボックスの更新が完了したら、そのイベントにフックできます。コードをラップする必要があります

 element.bind("onchange", function () {
     scope.$apply(function() {
         //Code to update model goes here.
         //Basically you will need to copy the textbox's contents to the model,
         // you may wish to convert to a date object as well
     }
 }

angularuiのdatepickerソース コードの長さはわずか 120 行であり、datepicker ディレクティブを作成する例を探している場合は、優れたリソースになる可能性があります。

于 2013-11-04T05:53:24.653 に答える
2

また、ペルシャ暦を持つこのバージョンの angular-ui ブートストラップを使用することもできます: persian angular bootstrap

于 2015-04-26T13:51:15.953 に答える
2

現在、利用可能な良いものがあります。それはペルシャの angularjs カレンダーです: Amin Rahimi の angularjs Datepicker。

于 2014-08-13T11:12:41.857 に答える