آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

Angular Material به همراه یک کامپوننت Date-Picker بسیار شکیل و حرفه‌ای است اما … از تقویم شمسی پشتیبانی نمی‌کند. در این مطلب می‌خواهیم با تدارک یک DateAdapter سفارشی، این مشکل را برطرف کنیم تا در نهایت به یک چنین Date-Picker شمسی برسیم. با ما همراه شوید. تاریخچه‌ی تغییرات...

تاریخچه‌ی تغییرات کامپوننت Date-Picker

اخیرا تیم Angular Material، امکان تعریف تقویم‌های دیگری را بجز تقویم میلادی، با تدارک کلاس پایه DateAdapter فراهم کرده‌است. در این بین توسعه دهندگان ایرانی پیگیر نیز یک DateAdapter شمسی را بر این مبنا تهیه کرده‌اند که در ادامه نحوه‌ی افزودن و استفاده‌ی از آن‌را بررسی خواهیم کرد.

نصب پیشنیاز تبدیل تاریخ میلادی به شمسی و بر عکس

DateAdapter شمسی تهیه شده از کتابخانه‌ی jalali-moment برای تبدیل تاریخ‌ها استفاده می‌کند. بنابراین ابتدا نیاز است این وابستگی را نصب کرد:

npm install jalali-moment --save

افزودن DateAdapter شمسی به پروژه

برای افزودن DateAdapter شمسی تهیه شده، فایل جدید appsharedmaterial.persian-date.adapter.ts را به برنامه اضافه کرده و به صورت زیر تکمیل کنید:

import from "@angular/material"; import * as jalaliMoment from "jalali-moment"; export const PERSIAN_DATE_FORMATS = { parse: { dateInput: "jYYYY/jMM/jDD" }, display: { dateInput: "jYYYY/jMM/jDD", monthYearLabel: "jYYYY jMMMM", dateA11yLabel: "jYYYY/jMM/jDD", monthYearA11yLabel: "jYYYY jMMMM" } }; export class MaterialPersianDateAdapter extends DateAdapter { constructor() { super(); super.setLocale("fa"); } getYear(date: jalaliMoment.Moment): number { return this.clone(date).jYear(); } getMonth(date: jalaliMoment.Moment): number { return this.clone(date).jMonth(); } getDate(date: jalaliMoment.Moment): number { return this.clone(date).jDate(); } getDayOfWeek(date: jalaliMoment.Moment): number { return this.clone(date).day(); } getMonthNames(style: "long" | "short" | "narrow"): string[] { switch (style) { case "long": case "short": return jalaliMoment.localeData("fa").jMonths().slice(0); case "narrow": return jalaliMoment.localeData("fa").jMonthsShort().slice(0); } } getDateNames(): string[] { const valuesArray = Array(31); for (let i = 0; i 11) { throw Error( `Invalid month index "$". Month index has to be between 0 and 11.` ); } if (date

کار این Adapter و یا «وفق دهنده» این است که مشخص می‌کند، هفته‌ی ایرانی از چه روزی شروع می‌شود. نام روزهای هفته‌ی ایرانی چیست؟ برچسب‌های نام ماه‌های ایرانی چگونه باید تامین شوند و در کل جهت وفق دادن تقویم میلادی اصلی با تقویم شمسی، چه اجزایی باید به سیستم معرفی شوند تا این تقویم توکار بدون مشکل مانند قبل کار کند.

معرفی وفق دهنده‌ی شمسی به پروژه

پس از تعریف MaterialPersianDateAdapter و همچنین PERSIAN_DATE_FORMATS، برای معرفی آن‌ها به برنامه، فایل appsharedmaterial.module.ts را گشوده و به صورت زیر تغییر دهید:

import from "@angular/core"; import from "@angular/material"; import from "./material.persian-date.adapter"; @NgModule({ providers: [ , ] }) export class MaterialModule { }

کار این تعاریف، تعویض DateAdapter اصلی میلادی، با نمونه‌ی شمسی است. همچنین فرمت نمایشی برچسب‌ها را نیز جایگزین می‌کند.

پس از آن اگر mat-datepicker را به نحو متداولی به صفحه اضافه کنیم:

یک چنین خروجی حاصل خواهد شد:

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

چند مثال تکمیلی از کاربردهای کامپوننت mat-datepicker

۱) استفاده از تاریخ میلادی رسیده‌ی از سمت سرور و نمایش آن

با این کدها:

@Component() export class PersianDatepickerComponent { jsonDate = "2018-01-08T20:21:29.4674496"; dateControl = this.jsonDate; }

در اینجا jsonDate همان رشته‌ی تاریخی است که از سمت سرور دریافت شده و میلادی است. با انتساب آن به ngModel، به صورت خودکار شمسی نمایش داده خواهد شد:

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

۲) تعیین تاریخ آغاز تقویم و نمایش آن در حالت انتخاب سال

با این کدها:

import * as moment from "jalali-moment"; @Component() export class PersianDatepickerComponent { startDate = moment("2017-01-01", "YYYY-MM-DD"); // = moment.from("2017-01-01", "en"); }

در این مثال خاصیت startAt را به یک تاریخ میلادی متصل کرده‌ایم و همچنین خاصیت startView به year تنظیم شده‌است که یک چنین خروجی را در بار اول نمایش تقویم ایجاد می‌کند:

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

۳) تعیین باز‌ه‌ی تاریخی قابل انتخاب توسط کاربر

با این کدها:

import * as moment from "jalali-moment"; @Component() export class PersianDatepickerComponent { minDate = moment.from("2017-10-02", "en"); // = moment('2017-10-02', 'YYYY-MM-DD'); maxDate = moment.from("1396-07-29", "fa"); // = moment('1396-07-29', 'jYYYY-jMM-jDD'); }

همانطور که ملاحظه می‌کنید کتابخانه‌ی jalali-moment می‌تواند تاریخ شمسی و یا میلادی را توسط متد from آن دریافت کند و هر دو حالت در اینجا پس از انتساب به خواص min و max تقویم، به خوبی کار کرده و سبب محدود ساختن بازه‌ی قابل انتخاب توسط کاربر می‌شوند.

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

در این تصویر روزهای خاکستری، قابل انتخاب نیستند و غیرفعال شده‌اند (چون min به ۱۰ مهر و max به ۲۹ مهر تنظیم شده‌است).

۴) غیرفعال کردن روزهای قابل انتخاب بر اساس یک منطق سفارشی

با این کدها:

import * as moment from "jalali-moment"; @Component() export class PersianDatepickerComponent { myFilter = (d: moment.Moment): boolean => { const day: number = d.day(); // Prevent Thursday and Friday from being selected. return day !== 5 day !== 4; } }

در اینجا روزهای پنج‌شنبه و جمعه در تقویم نمایش داده شده، بر اساس تعریف matDatepickerFilter سفارشی، دیگر قابل انتخاب نیستند:

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

۵) کار با رخ‌دادهای تقویم

با این کدها:

import from "@angular/material"; import * as moment from "jalali-moment"; @Component() export class PersianDatepickerComponent { onInput(event: MatDatepickerInputEvent) { console.log("OnInput: ", event.value); } onChange(event: MatDatepickerInputEvent) { const x = moment(event.value).format("jYYYY/jMM/jDD"); console.log("OnChange: ", x); } }

در اینجا نحوه‌ی واکنش نشان دادن به رخ‌دادهای dateInput و dateChange کامپوننت mat-datepicker را ملاحظه می‌کنید:

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

در اینجا، onInput، با ورود دستی اطلاعات به textbox کامپوننت، فعال می‌شود و onChange، در صورت انتخاب یک تاریخ از تقویم.

کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید.

dotnettips

حتما بخوانید: سایر مطالب گروه آموزش

برای مشاهده فوری اخبار و مطالب در کانال تلگرام ما عضو شوید!

آموزش ‫شمسی سازی Date-Picker توکار Angular Material 6x

مطالب پیشنهادی

بیشترین بازدید یک ساعت گذشته