2

Angular.js は内部createDateInputType的に ngModel バインディングで日付と時刻固有の入力要素を処理するために使用します。これcreateDateParserは、日付/時刻の解析に使用されます。例:
の定義input[date]:

'date': createDateInputType('date', DATE_REGEXP,
    createDateParser(DATE_REGEXP, ['yyyy', 'MM', 'dd']),
    'yyyy-MM-dd'),

の定義input[time]:

'time': createDateInputType('time', TIME_REGEXP,
    createDateParser(TIME_REGEXP, ['HH', 'mm', 'ss', 'sss']),
   'HH:mm:ss.sss'),

基本的に、ソースで使用されている日付と時刻の形式を変更することは可能です。ただし、他の形式を指定する API/オプションはありません。(これは ngModelOptions に適していると思います)

今は、ディレクティブを使用して元の動作を拡張し、ユーザー指定のフォーマット文字列を使用するパーサー/フォーマッターを追加したいだけです。これには、次のような同様の機能が必要ですcreateDateParser-これらの内部関数をディレクティブで使用することは可能ですか?


別の解決策は、moment.js を解析/フォーマット ライブラリとして含めることです。

これを実証するためにプランカーをセットアップしました-moment.jsを使用します-しかし、機能がコアのどこかにある場合は、外部ライブラリを含める必要がない方がよいでしょう...(ブラウザがネイティブでない場合にのみディレクティブがアクティブになりますサポート日または時間)

最初の位置にパーサーとフォーマッターを追加するだけなarray.unshift()ので、フォーマッターの場合は最後に呼び出されます。パーサーの場合、最初に呼び出されます。
フォーマッタは、angular/iso フォーマットの文字列を date-object に変換し、ユーザーが指定した に従ってフォーマットしますformatString

ctrl.$formatters.unshift(function(value) {
    if (value) {
        var tempDate = moment(value, format_internal);
        var intDateFormatedString = tempDate.format(scope.formatString);
        return intDateFormatedString;
    }
});

パーサーは、他の方向でのみ同じように機能し、いくつかの検証を行います。

ctrl.$parsers.unshift(function(viewValue) {
    var resultString;
    if (viewValue) {
        // momentjs with strict parsing
        var tempDate = moment(viewValue, scope.formatString, true);
        if ( tempDate.isValid() ) {
            ctrl.$setValidity("userInput", true);
             // return as string with internal angular expected format
            resultString = tempDate.format(format_internal);
        }
    }
    return resultString;
});

一部のみ関連:

ngModelを使用してangularjsディレクティブでフォーマッタチェーンを手動で再実行する方法は?

うまくいけば、「質問」のスタイルは問題ありません。適切な焦点が見つかったかどうかわかりません..最終的には、どうにかして分割した方がよいでしょうか?

4

0 に答える 0