ถ้าใช้ angular แล้วกำลังมองหา pipe สำหรับ time ago ภาษาไทย อาจหายากสักหน่อย
เลยจำเป็นต้อง custom กันหน่อย แต่ก็ไม่ได้ทำเองหมดมีต้นแบบจาก https://github.com/AndrewPoyntz/time-ago-pipe
หรือใครอยากเอาไปใช้เลยก็ตามนี้ครับ
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import {Pipe, PipeTransform, NgZone, ChangeDetectorRef, OnDestroy} from "@angular/core"; @Pipe({ name:'timeAgoThai', pure:false }) export class TimeAgoThaiPipe implements PipeTransform, OnDestroy { private timer: number | null; constructor(private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) {} transform(value:string) { this.removeTimer(); let d = new Date(value); let now = new Date(); let seconds = Math.round(Math.abs((now.getTime() - d.getTime())/1000)); let timeToUpdate = this.getSecondsUntilUpdate(seconds) *1000; this.timer = this.ngZone.runOutsideAngular(() => { if (typeof window !== 'undefined') { return window.setTimeout(() => { this.ngZone.run(() => this.changeDetectorRef.markForCheck()); }, timeToUpdate); } return null; }); let minutes = Math.round(Math.abs(seconds / 60)); let hours = Math.round(Math.abs(minutes / 60)); let days = Math.round(Math.abs(hours / 24)); let months = Math.round(Math.abs(days/30.416)); let years = Math.round(Math.abs(days/365)); if (seconds <= 45) { return 'ไม่กี่วินาที่ที่แล้ว'; } else if (seconds <= 90) { return 'ประมาณหนึ่งนาทีที่แล้ว'; } else if (minutes <= 45) { return minutes + ' นาทีที่แล้ว'; } else if (minutes <= 90) { return 'ประมาณหนึ่งชั่วโมงที่แล้ว'; } else if (hours <= 22) { return hours + ' ชั่วโมงที่แล้ว'; } else if (hours <= 36) { return 'ประมาณหนึ่งวันที่แล้ว'; } else if (days <= 25) { return days + ' วันที่แล้ว'; } else if (days <= 45) { return 'ประมาณหนึ่งเดือนที่แล้ว'; } else if (days <= 345) { return months + ' เดือนที่แล้ว'; } else if (days <= 545) { return 'ประมาณหนึ่งปีที่แล้ว'; } else { // (days > 545) return years + ' ปีที่แล้ว'; } } ngOnDestroy(): void { this.removeTimer(); } private removeTimer() { if (this.timer) { window.clearTimeout(this.timer); this.timer = null; } } private getSecondsUntilUpdate(seconds:number) { let min = 60; let hr = min * 60; let day = hr * 24; if (seconds < min) { // less than 1 min, update ever 2 secs return 2; } else if (seconds < hr) { // less than an hour, update every 30 secs return 30; } else if (seconds < day) { // less then a day, update every 5 mins return 300; } else { // update every hour return 3600; } } } |
ก่อนใช้ก็ add pipe เข้าไปใน app.module ให้เรียบร้อย
import { TimeAgoThaiPipe } from ‘./pipe/TimeAgoThaiPipe’;
@NgModule({
declarations: [
…
TimeAgoThaiPipe
]
})
add เสร็จก็เรียกใช้ ใน html ไฟล์ได้เลยครับ
<span>{{post.UpdatedAt | timeAgoThai}}</span>
จบครับ หวังว่าจะมีประโยชน์นะครับ