0%

Angular 筆記 - 自訂 Pipe 修改現成日期字串切割與轉換文字內容

angular

本篇記錄透過使用套件接回來的日期修改流程。

開發環境與實作內容

需求

目前套件的日期當我選到一週的時候,會顯示如下圖。

week

但專案需求要改成 2021, 6/27 - 7/3

處理流程

首先這是套件已經封裝好的日期格式,再透過觀察發現只有在 week 的時候會顯示日期範圍的呈現,所以變成我要改成自訂義的方式,這時前輩的提點說可以使用 Pipe 來轉換顯示。

建立 Pipe

基本的 date pipe 可以看 Angular 筆記 - Pipe 管線元件:date

那這邊要自訂義的 Pipe 才能轉換日期格式,起手式為建立一個 pipe 的 ts 檔案,這邊我就自定名稱為 weekRange.pipe.ts

  • 先輸入 @Pipe 透過智能提示,會出現選項,然後它是一個 function,裡面放一個物件,keynamevalue 是這個 pipe 在 HTML 要使用的名字,是字串型別。
  • 要 export 這個 pipe,class 是跟剛剛自訂義的 name 一樣,這邊是 test(大小寫也要相同),並且要用 PipeTransform 來實作它。
  • 裡面要用一個 tranform 的方法,參數這邊是帶套件的 date
1
2
3
4
5
6
7
8
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "test",
})
export class test implements PipeTransform {
transform(date: string) {}
}

到目前為止已經完成基礎設置。

最後記得要去 app.module.ts 的 declaration 陣列中引入 pipe。

引入的地方看專案而定。

取得日期並開始切割它

我先把 date 取出來看看格式是什麼?

console.log

date

確認取到跟內容相符的字串後,就開始來處理吧!

使用 split 分割

1
2
let time = date.split(",");
console.log("time:", time); // 會取到一個陣列

我會得到一個陣列,如下圖。

dateArr

這時候我已經取到年份了,再來我要處理月跟日。所以我先把年先存起來。然後剛剛可以觀察到兩個日期中間有一個 dash 作為連接,所以要把這個拿掉。

1
2
3
const year = time[1]; //年
const firstDay = time[0].split("-");
console.log("firstDay:", firstDay);

一樣使用 split() 將 dash 兩邊的字串取出,又會得到一個陣列。

dateArr2

會發現月跟日中間有一個空白,也是用 split() 去分割字串,並且用變數將其存取。這樣我就有起始月結束月以及起始日結束日

1
2
3
const getStartDay = firstDay[0].split(" ");
const getEndDay = firstDay[1].split(" ");
console.log("getStartDay:", getStartDay, "getEndDay:", getEndDay);

getDate

取得需要的字串

已經將字串處理好之後,剩下的就是組合了,所以我依序按照陣列的排序取得我要的字串內容。

1
2
3
4
5
//* 取得字串
const startMonth = getStartDay[0];
const startDay = getStartDay[1]; //6
const endDay = getEndDay[2];
const endMonth = getEndDay[1]; //6 or 7

將英文的月份轉成數字

使用兩個函式,並且用 switch 去轉換起訖月的格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
getStartMonth(startMonth: string) {
let month = "";
switch (startMonth) {
case "Jan":
return (month = "1");
case "Feb":
return (month = "2");
case "Mar":
return (month = "3");
case "Apr":
return (month = "4");
case "May":
return (month = "5");
case "Jun":
return (month = "6");
case "Jul":
return (month = "7");
case "Aug":
return (month = "8");
case "Sep":
return (month = "9");
case "Oct":
return (month = "10");
case "Nov":
return (month = "11");
case "Dec":
return (month = "12");
}
}

getEndMonth(endMonth: string) {
let month = "";
switch (endMonth) {
case "Jan":
return (month = "1");
case "Feb":
return (month = "2");
case "Mar":
return (month = "3");
case "Apr":
return (month = "4");
case "May":
return (month = "5");
case "Jun":
return (month = "6");
case "Jul":
return (month = "7");
case "Aug":
return (month = "8");
case "Sep":
return (month = "9");
case "Oct":
return (month = "10");
case "Nov":
return (month = "11");
case "Dec":
return (month = "12");
}
}

組合成需求要的顯示格式

使用模板語法呈現此時間格式。

1
2
3
return `${year}, ${this.getStartMonth(
startMonth
)}/${startDay} - ${this.getEndMonth(endMonth)}/${endDay}`;

然後就完成囉~~

Demo

Demo: https://stackblitz.com/edit/angular-ivy-d2cxqi?file=src%2Fapp%2Fapp.component.html

因 Demo 沒有使用行事曆套件,所以僅示意處理流程的概念。