このファイルはプロジェクトのルートにあります。ステップ3:作成済みのテーマとマテリアルアイコンをインポートします。Materialには、いくつかの事前に作成されたテーマが付属しています。これらのテーマは、色と基本的なスタイリングを際立たせています。ファイルに追加します。フォルダー内にあります。ファイルのheadセクションに追加できます。<app-root></app-root></body></html>ステップ4:カスタムマテリアルモジュールファイルを作成します。し、次のコードを追加します。必要に応じて、将来的にコンポーネントを追加できます。簡単に含めることができるため、このファイルは独自に作成され、このファイルはapp.module.ts内にインポートされます。{}ステップ5:App.module.tsファイルにMaterialModuleをインポートします。ファイル内にMaterialModuleをインポートします。ファイル内にDatepickerHTMLコードを記述します。#picker></mat-datepicker></mat-form-field>ファイルを保存し、ターミナルまたはcmdに移動して、AngularDevelopmentServerを起動します。--openブラウザに移動すると、次の画像のようなものが表示されます。プロパティを介して接続されます。#myDatepicker></mat-datepicker>オプションの日付ピッカートグルボタンが利用可能です。上記の例にトグルボタンを追加できます。#myDatepicker></mat-datepicker><mat-form-field>の一部である入力でも同じように機能し、トグルボタンをマテリアル入力のプレフィックスまたはサフィックスとして簡単に使用できます。startViewプロパティを使用して、カレンダーを最初に開いたときに表示される外観を設定できます。複数年に構成できます。デフォルトでは、月表示を開始します。カレンダーが開く月、年、または年の範囲は、最初に日付が現在選択されているかどうかを確認することによって決定され、選択されている場合は、その日付を含む月または年が開きます。それ以外の場合は、1か月または1年で開き、今日の日付を提供します。プロパティを使用して簡単にオーバーライドできます。日付を含む月または年に開きます。[startAt]="startDate"></mat-datepicker></mat-form-field>コードはGithubにあります。GITHUBコードAngularDatepickerの検証3つのプロパティにより、日付検証がdatepicker入力に追加されます。最初の2つは、最小プロパティと最大プロパティです。入力の検証を強制するために、これらのプロパティは、それぞれの値の前後のカレンダーポップアップのすべての日付を無効にし、ユーザーが最小または最大の日付を含む月または年(現在のビューに応じて)を超えてカレンダーを進めるのを防ぎます。次のHTMLマークアップを参照してください。#picker></mat-datepicker></mat-form-field>また、上記のマークアップに関連するtypescriptファイルも参照してください。1);}日付検証を追加する2番目の方法は、datepicker入力のmatDatepickerFilterプロパティを使用することです。=>ブール値の関数を受け入れます(<D>は、datepickerで使用される日付型です。日付の実装の選択を参照してください)。真の結果は日付が有効であることを示し、偽の結果は日付が有効でないことを示します。繰り返しますが、これにより、無効なカレンダーの日付も無効になります。matDatepickerFilterを使用する場合とminまたはmaxを使用する場合の重要な違いは、特定のポイントの前後のすべての日付を除外しても、ユーザーがそのポイントを超えてカレンダーを進めることを妨げないことです。次のコード例を参照してください。最初にHTMLマークアップを参照してください。#picker></mat-datepicker></mat-form-field>ここで、上記のマークアップに関連するTypescriptファイルを参照してください。}}この例では、ユーザーは2005年を過ぎて戻ることができますが、それ以前のすべての日付は選択できなくなります。彼らは2000年よりもカレンダーに戻ることはできません。最小値の前、最大値の後、またはフィルターで除外された日付を手動で入力すると、入力に検証エラーが発生します。各検証プロパティには、チェックできる異なるエラーがあります。minプロパティに違反する値には、matDatepickerMinエラーがあります。maxプロパティに違反する値には、matDatepickerMaxエラーがあります。matDatepickerFilterプロパティに違反する値には、matDatepickerFilterエラーがあります。角度入力および変更イベント入力のネイティブ(入力)および(変更)イベントは、入力要素とのユーザーインタラクションのみをトリガーします。ユーザーがカレンダーポップアップから日付を選択しても、これらは起動しません。したがって、datepicker入力は、(dateInput)および(dateChange)イベントもサポートします。これらは、ユーザーが入力またはポップアップのいずれかを操作したときにトリガーされます。(dateInput)イベントは、ユーザーがカレンダーから日付を入力または選択したために値が変更されるたびに発生します。同様に、(dateChange)イベントは、ユーザーが入力の入力を終了するたびに(<input>ブラーで)、またはユーザーがカレンダーから日付を選択したときに発生します。次のHTMLマークアップを参照してください。events">{{e}}</div></div>次に、そのマークアップに関連するtypescriptファイルを参照してください。}}AngularDatepickerの一部を無効にする他の標準の<input>と同様に、disabledプロパティを追加することで、datepicker入力を無効にすることができます。デフォルトでは、<mat-datepicker>と<mat-datepicker-toggle>は<input>から無効な状態を継承しますが、これは、datepickerまたはtoggle要素にdisabledプロパティを設定することでオーバーライドできます。これは、テキスト入力を無効にしたいが、カレンダーを介した選択を許可したい場合、またはその逆の場合に非常に便利です。次のHTMLマークアップを参照してください。</mat-form-field></p>ここで、typescriptファイルを参照してください。{}このチュートリアルは以上です。