Angular の日付ピッカー

1. Angular での日付ピッカーの使用
2. Angular で input タグを使用してシンプルな日付ピッカーを作成する
3. Angular で日付ピッカーの選択された日付を取得するために onChange イベントを使用する
4. Angular でボタンをクリックした後に日付を保存するために onClick イベントを使用する
5. DatePipe を使用して Angular の日付ピッカーの日付形式を変更する

例を使用して、Angular アプリケーションに日付ピッカーを追加する簡単な方法を紹介します。

また、Angular で日付ピッカーを表示するための Angular 日付ピッカーライブラリも紹介します。

Angular での日付ピッカーの使用

この現代の管理システムでは、日付ピッカーは最も一般的なフォーム要素の 1つです。日付ピッカーを使用すると、ユーザーは生年月日やイベントの日付などの既知の日付を選択できます。

日付ピッカーを使用すると、カスタムユーザーインターフェイスで日、月、年で構成される日付を選択できます。これは、入力フォーム要素のバリエーションです。

例を見て、日付ピッカーを使用して、onChange および onSubmit イベントで選択された日付を選択して取得する方法を理解しましょう。

これらのイベントの違いは、複数のフィールドがある場合は、フォーム onSubmit イベントから値を取得する方がよいということです。

ただし、日付ピッカーしかなく、ユーザーが選択した日付を取得したい場合は、onChange イベントを使用して値を取得できます。

Angular で input タグを使用してシンプルな日付ピッカーを作成する

次のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

次に、input タグを使用して、app.component.html ファイルに日付ピッカーを作成します。

# Angular
<input type="date" />

この 1 行のコードは、以下に示すように、日付ピッカーを作成します。

出力：

したがって、この単純な 1 行のコードを使用して、このタイプの日付ピッカーを作成できます。それでは、日付を選択するたびに、選択した日付を取得しましょう。

Angular で日付ピッカーの選択された日付を取得するために onChange イベントを使用する

app.component.ts では、パラメータとして event を取り、選択したデータを console.log する関数 SendDataonChange を作成します。

# Angular
SendDataonChange(event: any) {
console.log(event.target.value);
}

それでは、この関数をテンプレートに設定しましょう。この関数は、日付が変更されるたびにトリガーされます。

# Angular
<input type="date" (change)="SendDataonChange($event)" />

出力：

Angular でボタンをクリックした後に日付を保存するために onClick イベントを使用する

ボタンがクリックされた後に日付を保存したいとします。app.component.html でボタンを作成し、app.component.ts で作成された関数 onClick() でバインドできます。

したがって、app.component.html のコードは次のようになります。

# Angular
<input type="date" (change)="SendDataonChange($event)" />
<br>
<button (click)="onClick()">Change</button>

日付ピッカーを [(ngModel)] でバインドする必要があります。したがって、コードは次のようになります。

# Angular
<input type="date" (change)="SendDataonChange($event)" [(ngModel)]="changed" />
<br>
<button (click)="onClick()">Change</button>

次に、CSS を追加して、ボタンと日付ピッカーをエレガントに見せましょう。したがって、app.component.css のコードは次のようになります。

# Angular
button {
padding: 10px;
background-color: black;
border: none;
color: white;
margin-top: 10px;
}
input{
padding: 5px;
font-size: 15px;
}

出力：

app.component.ts で、日付ピッカーをバインドする変数を定義します。

# Angular
changed: Date;

次に、ボタンがクリックされると日付ピッカーからの値を console.log する関数 onClick を作成します。

# Angular
onClick() {
console.log(this.changed);
}

出力：

DatePipe を使用して Angular の日付ピッカーの日付形式を変更する

それでは、日付の形式を変更する方法について説明しましょう。

最高のソフトウェア開発者が効率的かつエラーのないソフトウェアを開発しているため、多くの開発者はさまざまな日付形式での作業に追われています。

日付形式を変更する最良の方法は、日付を保存して取得する関数を作成することです。したがって、データベースの形式は同じままですが、関数を使用して必要な形式で簡単に表示できます。

まず、以下に示すように、app.component.ts に DatePipe をインポートします。

# Angular
import { DatePipe } from '@angular/common';

次に、フォーマットが変更されて返された後の日付の値を保存するために使用される新しい変数 newDate を定義します。

changed をパラメーターとして受け取り、DatePipe を使用して日付形式を必要な形式に変換する関数 changeFormat() を作成しましょう。

日付のタイムゾーンを格納する変数パイプを定義します。

app.component.ts のコードは次のようになります。

# Angular
import { Component, VERSION } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
changed: Date;
pipe = new DatePipe('en-US');
newDate: string;
changeFormat(changed){
let ChangedFormat = this.pipe.transform(this.changed, 'dd/MM/YYYY');
this.newDate = ChangedFormat;
}

onClick() {
console.log(this.changed);
}
SendDataonChange(event: any) {
console.log(event.target.value);
}
}

ここで、関数 onClick() および console.log から新しい日付値を新しい形式で渡します。

# Angular
onClick() {
this.changeFormat(this.changed);
console.log(this.newDate);
}

出力：

上記の例でわかるように、日付を選択すると 2022-01-19 が表示されますが、ボタンをクリックすると、onClick() 関数内で changeFormat() 関数が呼び出され、変更された形式の日付を返します。

このように、アプリケーションで日付ピッカーを使用して、日付を選択するときに日付値を保存したり、ボタンがクリックされたときに値を保存したりできます。また、DatePipe を使用して日付形式を変更する方法も学びました。

完全なコードはここで確認できます。