چندی قبل مطلب «نمایش تاریخ شمسی توسط JavaScript در AngularJS» را در این سایت مطالعه کردید. در اینجا قصد داریم معادل Angular آنرا تهیه کنیم (واژهی AngularJS به نگارشهای 1x اشاره میکند و Angular به تمام نگارشهای پس از 2).
نصب پیشنیازهای کار با moment-jalaali
ابتدا نیاز است بستهی npm این کتابخانه را نصب کنیم که به همراه فایلهای js مرتبط با آن میباشد:
سپس جهت بهبود تجربهی کاربری با آن در IDEهای امروزی، خصوصا VSCode، بهتر است typings آنرا نیز نصب کنیم؛ تا علاوه بر داشتن Intellisense، بتوان به صورت strongly typed با آن کار کرد:
VSCode به صورت خودکار پوشهی مخصوص node_modules\@types را تحت نظر قرار میدهد و نصب بستههای typings در آن، سبب بارگذاری آنی آنها خواهد شد.
به علاوه اگر به فایل tsconfig.json واقع در ریشهی پروژه نیز دقت کنید، وجود تعریف ذیل، امکان خوانده شدن این تعاریف را توسط کامپایلر TypeScript میسر میکند:
نحوهی کار Strongly Typed با کتابخانهی moment-jalaali در برنامههای مبتنی بر TypeScript
پس از نصب پیشنیازهای یاد شده، ابتدا برای دسترسی به امکانات این کتابخانه، ماژول آنرا import میکنیم:
- پس از import ماژولی به نام moment-jalaali، اکنون نحوهی استفادهی از آنرا در متد persianDateTests مشاهده میکنید.
- متد momentJalaali.loadPersian باید تنها یکبار فراخوانی شود. کار آن تبدیل نامهای روزها و ماههای میلادی، به شمسی است.
- پس از آن از طریق متد format آن، میتوان انواع و اقسام حالات مختلف را بررسی کرد که در اینجا سه نمونه را مشاهده میکنید.
نوشتن یک Pipe سفارشی برای تبدیل تاریخهای میلادی دریافتی از سرور به قالب شمسی
پس آشنا شدن با نحوهی استفادهی از این کتابخانه در یک برنامهی تایپاسکریپتی، تبدیل کردن آن به یک Pipe سفارشی بسیار سادهاست. برای این منظور ابتدا یک Pipe جدید را به ماژول فرضی custom-pipe.module اضافه میکنیم:
با این محتوا:
در اینجا نیز ابتدا ماژول moment-jalaali تعریف شدهاست و سپس توسط آن، value به عنوان پارامتر متد momentJalaali و args به عنوان پارامتر متد format ارسال شدهاند. در حین استفادهی از Pipe، مقدار value همان تاریخ دریافتی است و args به فرمت خاصی که توسط استفاده کننده مشخص میشود، تنظیم خواهد شد.
به این ترتیب میتوان یک چنین تبدیلات سمت کاربری را انجام داد که نمونهای از خروجی آنرا در تصویر فوق نیز ملاحظه میکنید:
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.
نصب پیشنیازهای کار با moment-jalaali
ابتدا نیاز است بستهی npm این کتابخانه را نصب کنیم که به همراه فایلهای js مرتبط با آن میباشد:
npm install moment-jalaali --save
سپس جهت بهبود تجربهی کاربری با آن در IDEهای امروزی، خصوصا VSCode، بهتر است typings آنرا نیز نصب کنیم؛ تا علاوه بر داشتن Intellisense، بتوان به صورت strongly typed با آن کار کرد:
npm install @types/moment-jalaali --save-dev
VSCode به صورت خودکار پوشهی مخصوص node_modules\@types را تحت نظر قرار میدهد و نصب بستههای typings در آن، سبب بارگذاری آنی آنها خواهد شد.
به علاوه اگر به فایل tsconfig.json واقع در ریشهی پروژه نیز دقت کنید، وجود تعریف ذیل، امکان خوانده شدن این تعاریف را توسط کامپایلر TypeScript میسر میکند:
{ "typeRoots": [ "node_modules/@types" ] }
نحوهی کار Strongly Typed با کتابخانهی moment-jalaali در برنامههای مبتنی بر TypeScript
پس از نصب پیشنیازهای یاد شده، ابتدا برای دسترسی به امکانات این کتابخانه، ماژول آنرا import میکنیم:
import * as momentJalaali from "moment-jalaali"; export class MomentJalaaliTestComponent implements OnInit { now: string; nowLongDateFormat: string; nowExtraLongDateFormat: string; ngOnInit() { this.persianDateTests(); } persianDateTests() { // https://github.com/jalaali/moment-jalaali momentJalaali.loadPersian(/*{ usePersianDigits: true }*/); // نمایش فارسی نام ماهها، روزها و امثال آن this.now = momentJalaali().format("jYYYY/jMM/jDD HH:mm"); this.nowLongDateFormat = momentJalaali().format("jD jMMMM jYYYY [ساعت] LT"); this.nowExtraLongDateFormat = momentJalaali().format( "dddd، jD jMMMM jYYYY [ساعت] LT" ); } }
- متد momentJalaali.loadPersian باید تنها یکبار فراخوانی شود. کار آن تبدیل نامهای روزها و ماههای میلادی، به شمسی است.
- پس از آن از طریق متد format آن، میتوان انواع و اقسام حالات مختلف را بررسی کرد که در اینجا سه نمونه را مشاهده میکنید.
نوشتن یک Pipe سفارشی برای تبدیل تاریخهای میلادی دریافتی از سرور به قالب شمسی
پس آشنا شدن با نحوهی استفادهی از این کتابخانه در یک برنامهی تایپاسکریپتی، تبدیل کردن آن به یک Pipe سفارشی بسیار سادهاست. برای این منظور ابتدا یک Pipe جدید را به ماژول فرضی custom-pipe.module اضافه میکنیم:
ng g p CustomPipe/moment-jalaali -m custom-pipe.module
import { Pipe, PipeTransform } from "@angular/core"; import * as momentJalaali from "moment-jalaali"; @Pipe({ name: "momentJalaali" }) export class MomentJalaaliPipe implements PipeTransform { transform(value: any, args?: any): any { return momentJalaali(value).format(args); } }
به این ترتیب میتوان یک چنین تبدیلات سمت کاربری را انجام داد که نمونهای از خروجی آنرا در تصویر فوق نیز ملاحظه میکنید:
<h2>Server side dates:</h2> <div *ngFor="let date of dates"> <span dir="ltr">{{date | momentJalaali:'jYYYY/jMM/jDD hh:mm' }}</span>, <span dir="rtl">{{date | momentJalaali:'jD jMMMM jYYYY [ساعت] LT'}}</span> </div>
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.