PrimeNGのカレンダーで選択された年を取得する

2021年6月11日(金)

環境

Node Version Managerをインストールする

Debianにcurlコマンドが入っていないので先にインストールする必要がある。

$ pwd
/home/mizuki

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
bash: curl: コマンドが見つかりません

$ sudo apt update && sudo apt upgrade
$ sudo apt install curl

新しい端末を起動してインストールしたcurlのバージョンを確認する。

$ curl --version
curl 7.64.0 (x86_64-pc-linux-gnu) libcurl/7.64.0 OpenSSL/1.1.1d zlib/1.2.11 libidn2/2.0.5 libpsl/0.20.2 (+libidn2/2.0.5) libssh2/1.8.0 nghttp2/1.36.0 librtmp/2.3
Release-Date: 2019-02-06
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtmp rtsp scp sftp smb smbs smtp smtps telnet tftp
Features: AsynchDNS IDN IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz TLS-SRP HTTP2 UnixSockets HTTPS-proxy PSL

あらためてNode Version Managerをインストールする。

$ pwd
/home/mizuki

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

新しい端末を起動してインストールしたnvmのバージョンを確認する。

$ command -v nvm
nvm

$ nvm -v
0.38.0

参考情報

Node.jsをインストールする

nvmを使ってインストールする。

$ pwd
/home/mizuki

利用可能なバージョンを調べる。
$ nvm ls-remote
v14.17.2   (Latest LTS: Fermium)

バージョンを指定してインストールする。
$ nvm install 14.17.2

インストールしたバージョンを確認する。
$ nvm ls
->     v14.17.2
default -> 14.17.2 (-> v14.17.2)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v14.17.2) (default)
stable -> 14.17 (-> v14.17.2) (default)
lts/* -> lts/fermium (-> v14.17.2)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.1 (-> N/A)
lts/fermium -> v14.17.2

Node.jsのバージョンを確認する。
$ node -v
v14.17.2

Angular CLIをインストールする

$ pwd
/home/mizuki/workspace/angular12

$ npm install @angular/cli

新しい端末を起動してインストールしたAngular CLIのバージョンを確認する。

$ pwd
/home/mizuki/workspace/angular12

ローカルインストールしたngコマンドを実行する。
$ npx ng version
Angular CLI: 12.1.1
Node: 14.17.2
Package Manager: npm 6.14.13
OS: linux x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.4
@angular-devkit/core         12.0.4
@angular-devkit/schematics   12.0.4
@schematics/angular          12.0.4

参考情報

Angularのプロジェクトを作成する

$ pwd
/home/mizuki/workspace/angular12

$ npx ng new primeng-calendar-get-year
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss

Debianにgitが入っていないのでインストールしておく。

$ sudo apt install git
$ git --version
git version 2.20.1

アプリケーションを実行する。終了はブラウザを閉じて端末でCTRL+Cを入力する。

$ pwd
/home/mizuki/workspace/angular12/primeng-calendar-get-year

$ npx ng serve --open

参考情報

AngularのプロジェクトにPrimeNGをインストールする

$ pwd
/home/mizuki/workspace/angular12/primeng-calendar-get-year

$ npm install primeng
$ npm install primeicons

参考情報

PrimeNGのカレンダーで選択された年を取得する

カレンダーに選択されたときのイベントリスナーを設定する。

<p-calendar (onSelect)="onSelect($event)"></p-calendar>

イベントリスナーで選択された日付を受け取る。

onSelect(value: Date): void {
  this.year = value.getFullYear().toString();
}

参考情報

GitHub repository

primeng-calendar-get-year

動作イメージ

PrimeNGのカレンダーで選択された年を取得する