Angular Material Datepicker একটি প্রি-বিল্ট UI কম্পোনেন্ট যা ব্যবহারকারীদের তারিখ নির্বাচন করতে সহায়তা করে। এটি Material Design গাইডলাইন অনুসরণ করে এবং ডেভেলপারদের জন্য সহজে কাস্টমাইজযোগ্য, রেসপন্সিভ এবং সুন্দর একটি ডেটপিকার তৈরি করতে সহায়ক। অ্যাঙ্গুলার ম্যাটেরিয়াল ডেটপিকার ইনপুট ফিল্ডের সাথে একত্রিত হয়ে ব্যবহারকারীদের একটি ক্যালেন্ডার ইন্টারফেস প্রদান করে, যার মাধ্যমে তারা একটি নির্দিষ্ট তারিখ নির্বাচন করতে পারেন।

অ্যাঙ্গুলার ম্যাটেরিয়াল ডেটপিকার ব্যবহার করা

ডেটপিকার ব্যবহারের জন্য আপনাকে কিছু মৌলিক পদক্ষেপ অনুসরণ করতে হবে। এগুলো হল:

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে MatDatepickerModule এবং MatInputModule ইমপোর্ট করতে হবে যাতে আপনি ডেটপিকার এবং ইনপুট ফিল্ড ব্যবহার করতে পারেন। app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';  // নেটিভ ডেট ফরম্যাট সাপোর্ট করতে

@NgModule({
  declarations: [AppComponent],
  imports: [
    MatDatepickerModule,  // ডেটপিকার মডিউল
    MatInputModule,       // ইনপুট মডিউল
    MatNativeDateModule,  // নেটিভ ডেট সাপোর্ট
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

২. HTML ফাইলে ডেটপিকার ব্যবহার

এখন, HTML ফাইলে ডেটপিকার ব্যবহার করার জন্য mat-datepicker ডিরেকটিভ ব্যবহার করুন।

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

এখানে, mat-datepicker একটি ক্যালেন্ডার ডেটপিকার তৈরি করবে এবং matInput এটিকে ইনপুট ফিল্ডের সাথে একত্রিত করবে।

৩. ডেটপিকার পপআপ কাস্টমাইজ করা

ডেটপিকার পপআপের জন্য কাস্টম স্টাইল এবং ফিল্ড প্লেসহোল্ডারও নির্ধারণ করা যায়। আপনি চাইলে ক্যালেন্ডার ডিজাইন এবং এর অন্যান্য ফিচার কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, ডেটপিকার ইনপুট ফিল্ডের প্লেসহোল্ডার কাস্টমাইজ করা:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Select your birthdate" [(ngModel)]="birthDate">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

৪. ডেটপিকার ডিফল্ট মান সেট করা

ডেটপিকারকে ডিফল্ট তারিখের জন্য ইনিশিয়ালাইজ করা যেতে পারে। আপনি ngModel বা FormControl এর মাধ্যমে ডেটপিকার এর মান অ্যাসাইন করতে পারেন।

export class AppComponent {
  birthDate: Date = new Date(2000, 1, 1); // ডিফল্ট তারিখ
}

এখন birthDate হবে ডিফল্ট মান, যা ডেটপিকার ফিল্ডে প্রদর্শিত হবে।

৫. ডেটপিকার ইনপুট ফিল্ডে কাস্টম ফরম্যাট ব্যবহার

ডেটপিকার ইনপুট ফিল্ডে আপনি একটি কাস্টম ডেট ফরম্যাট ব্যবহার করতে পারেন, যেমন:

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'LL',  // মাস/দিন/বছর ফরম্যাট
  },
  display: {
    dateInput: 'LL',  // মাস/দিন/বছর ফরম্যাট
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})

এখন ডেটপিকার ইনপুট ফিল্ডে আপনি কাস্টম ডেট ফরম্যাট দেখতে পাবেন।

৬. ডেটপিকার রেঞ্জ সিলেকশন

আপনি ডেটপিকারকে রেঞ্জ সিলেকশন করার জন্যও কাস্টমাইজ করতে পারেন, যেখানে ব্যবহারকারী একটি নির্দিষ্ট সময়ের মধ্যে তারিখ নির্বাচন করতে পারবেন।

<mat-form-field>
  <input matInput [matDatepicker]="startDate" placeholder="Start Date">
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="endDate" placeholder="End Date">
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

এটি একটি সাধারণ তারিখ রেঞ্জ নির্বাচন ইন্টারফেস তৈরি করবে।

৭. ডেটপিকার ডেটা বাইন্ডিং

Angular এর Reactive Forms এবং ngModel এর মাধ্যমে ডেটপিকারকে ডেটা বাইন্ডিং করতে পারেন।

import { FormControl } from '@angular/forms';

export class AppComponent {
  date = new FormControl(new Date());
}

এটি আপনাকে ডেটপিকার ব্যবহার করতে সহায়তা করবে এবং ফর্মের একটি অংশ হিসেবে মান ট্র্যাক করবে।

<mat-form-field>
  <input matInput [matDatepicker]="picker" [formControl]="date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

ডেটপিকার কাস্টমাইজেশন

Angular Material Datepicker ব্যবহারকারীদের জন্য কিছু কাস্টমাইজেশন ফিচার সরবরাহ করে:

• Disable Dates: আপনি কিছু নির্দিষ্ট দিন অক্ষম করতে পারেন (যেমন, সপ্তাহের কোনও দিন বা বিশেষ দিন)।
• Min/Max Date: আপনি সর্বনিম্ন এবং সর্বোচ্চ তারিখ সেট করতে পারেন, যাতে ব্যবহারকারী সেগুলোর বাইরে কোনও তারিখ নির্বাচন করতে না পারে।
• Date Range: আপনি একটি তারিখের রেঞ্জ নির্বাচন করতে সক্ষম হতে পারেন।

Disable Specific Dates:

// Disable weekends (Saturday and Sunday)
import { MatDatepickerInputEvent } from '@angular/material/datepicker';

export class AppComponent {
  disableWeekends(date: Date | null): boolean {
    const day = (date || new Date()).getDay();
    return day === 0 || day === 6;  // Disable Sunday and Saturday
  }
}

<mat-form-field>
  <input matInput [matDatepicker]="picker" [matDatepickerFilter]="disableWeekends">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Angular Material Datepicker একটি শক্তিশালী এবং সহজে কাস্টমাইজযোগ্য কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনের জন্য একটি আধুনিক এবং রেসপন্সিভ তারিখ নির্বাচন সিস্টেম সরবরাহ করে। এটি বিভিন্ন কাস্টমাইজেশন সুবিধা সহ আসে, যেমন ডেট ফরম্যাট কাস্টমাইজেশন, রেঞ্জ সিলেকশন, এবং ডিসেবল/এনাবল ডেট কাস্টমাইজেশন। এটি ব্যবহারকারীদের একটি উন্নত এবং সহজ অভিজ্ঞতা প্রদান করে, বিশেষ করে যখন অ্যাপ্লিকেশনে তারিখ নির্বাচন প্রয়োজন হয়।

Angular Material এর <mat-datepicker> কম্পোনেন্ট ব্যবহার করে সহজেই ডেটপিকার তৈরি করা যায়, যা ব্যবহারকারীদের তারিখ নির্বাচন করার সুবিধা প্রদান করে। ডেটপিকারটি Material Design এর গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনে সুন্দরভাবে একত্রিত হয়।

ডেটপিকার কনফিগার করার জন্য, Angular Material এর MatDatepickerModule এবং MatInputModule মডিউল দুটি ইমপোর্ট করতে হবে।

ডেটপিকার কনফিগার করার ধাপসমূহ

১. মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে Angular অ্যাপ্লিকেশনে MatDatepickerModule এবং MatInputModule মডিউলগুলো ইমপোর্ট করতে হবে।

app.module.ts ফাইলে ইমপোর্ট করুন:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // আপনার কম্পোনেন্ট
  ],
  imports: [
    // অন্যান্য মডিউলস
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,   // Native datepicker প্রদান করে
    ReactiveFormsModule
  ]
})
export class AppModule { }

২. ডেটপিকার টেমপ্লেট

ডেটপিকার ব্যবহার করার জন্য HTML টেমপ্লেটে <mat-datepicker> কম্পোনেন্ট ব্যবহার করা হয়। ডেটপিকার কম্পোনেন্টের সাথে <input matInput> এবং matDatepicker ডিরেকটিভ ব্যবহার করতে হবে।

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Select a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

এখানে:

• <input matInput> ডেটপিকার ইনপুট ফিল্ড।
• [matDatepicker]="picker" নির্দেশনা, যেখানে picker হলো ডেটপিকার টেমপ্লেট রেফারেন্স।
• <mat-datepicker #picker></mat-datepicker> ডেটপিকার কম্পোনেন্ট যা তারিখ নির্বাচন করার ইন্টারফেস প্রদান করে।

৩. ডেটপিকার কনফিগারেশন

আপনি ডেটপিকারটি কাস্টমাইজ করতে পারেন, যেমন তারিখের ফরম্যাট, সীমাবদ্ধতা ইত্যাদি। নিচে কিছু সাধারণ কনফিগারেশন উদাহরণ দেওয়া হলো।

১. তারিখ ফরম্যাট কাস্টমাইজ করা

ডেটপিকারটি কাস্টম তারিখ ফরম্যাটে প্রদর্শন করতে হলে, MAT_DATE_FORMATS কনফিগারেশন ব্যবহার করতে হবে।

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY/MM/DD',
  },
  display: {
    dateInput: 'YYYY/MM/DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'YYYY/MM/DD',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class AppModule { }

এখানে তারিখ YYYY/MM/DD ফরম্যাটে প্রদর্শিত হবে।

২. ডেটপিকার রেঞ্জ কনফিগার করা

আপনি একটি নির্দিষ্ট তারিখ রেঞ্জ সিলেকশন কনফিগার করতে পারেন, যেমন আজকের তারিখ থেকে আগামী মাস পর্যন্ত।

import { Component, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-datepicker-range',
  templateUrl: './datepicker-range.component.html',
  styleUrls: ['./datepicker-range.component.css']
})
export class DatepickerRangeComponent implements OnInit {

  minDate: Date;
  maxDate: Date;

  ngOnInit() {
    this.minDate = new Date();
    this.maxDate = new Date();
    this.maxDate.setMonth(this.maxDate.getMonth() + 1); // ১ মাস পরের তারিখ
  }
}

এখানে, minDate এবং maxDate ব্যবহার করে ডেটপিকারটির জন্য রেঞ্জ সেট করা হচ্ছে।

HTML:

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [min]="minDate" [max]="maxDate" placeholder="Select a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

৩. তারিখ নির্বাচন করা এবং ব্যবহার করা

আপনি যখন তারিখ নির্বাচন করবেন, তখন সেই মানটি ngModel বা FormControl এর মাধ্যমে আপনার টাইপস্ক্রিপ্ট কোডে পেতে পারেন।

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" placeholder="Select a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<p>Selected Date: {{ selectedDate | date }}</p>

TypeScript:

export class DatepickerComponent {
  selectedDate: Date;
}

Angular Material এর mat-datepicker কম্পোনেন্ট ব্যবহার করে আপনি সহজেই একটি তারিখ নির্বাচনকারী ফিল্ড তৈরি করতে পারেন। এটি অনেক ধরনের কনফিগারেশন সমর্থন করে, যেমন তারিখ ফরম্যাট কাস্টমাইজেশন, রেঞ্জ নির্ধারণ, এবং অন্যান্য ফিচার। Angular Material ডেটপিকার ব্যবহারের মাধ্যমে একটি সুন্দর এবং কার্যকরী UI তৈরি করা যায় যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

Angular Material এর MatDatepicker কম্পোনেন্ট ব্যবহার করে আপনি ডেট পিকার (Date Picker) তৈরি করতে পারেন। ডেট ফরম্যাট কাস্টমাইজ করা একটি সাধারণ চাহিদা, বিশেষত যখন আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট ডেট ফরম্যাট (যেমন dd/MM/yyyy, yyyy-MM-dd ইত্যাদি) প্রয়োজন হয়।

Angular Material এর MatDatepicker এবং Angular's DatePipe ব্যবহার করে ডেট ফরম্যাট কাস্টমাইজ করা যায়।

ডেট ফরম্যাট কাস্টমাইজ করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatDatepickerModule এবং MatNativeDateModule অথবা MatMomentDateModule (যদি আপনি Moment.js ব্যবহার করেন) আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core'; // Native date handling
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    FormsModule
  ]
})
export class AppModule {}

এখানে MatNativeDateModule ব্যবহার করা হয়েছে, যা ডিফল্টভাবে JavaScript এর Date অবজেক্ট ব্যবহার করে।

২. ডেট পিকার HTML কোড

এখন, আপনি <mat-datepicker> কম্পোনেন্ট ব্যবহার করে ডেট পিকার তৈরি করতে পারেন এবং ডেট ফরম্যাট কাস্টমাইজ করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Pick a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

এখানে [(ngModel)]="selectedDate" ব্যবহার করে আপনি ডেট পিকার থেকে নির্বাচিত তারিখ সংগ্রহ করছেন।

৩. ডেট ফরম্যাট কাস্টমাইজ করা

ডেট ফরম্যাট কাস্টমাইজ করতে, Angular এর DatePipe ব্যবহার করা হয়। এটি Angular এর বিল্ট-ইন পিপ (Pipe), যা ডেটাকে আপনার প্রয়োজন অনুযায়ী ফরম্যাট করে।

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css'],
  providers: [DatePipe]
})
export class DatePickerComponent {
  selectedDate: Date;

  constructor(private datePipe: DatePipe) {}

  getFormattedDate() {
    // Date format: dd/MM/yyyy
    return this.datePipe.transform(this.selectedDate, 'dd/MM/yyyy');
  }
}

এখানে, getFormattedDate() মেথডটি selectedDate ফরম্যাট করবে, যা আপনি HTML টেমপ্লেটে ব্যবহার করতে পারবেন।

৪. ডেট ফরম্যাট HTML টেমপ্লেটে প্রদর্শন

আপনি Angular's DatePipe ব্যবহার করে ফরম্যাট করা তারিখটি HTML টেমপ্লেটে প্রদর্শন করতে পারেন।

<div>
  <mat-form-field appearance="fill">
    <mat-label>Pick a date</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <p>Selected Date: {{ getFormattedDate() }}</p>
</div>

এখানে, getFormattedDate() মেথডটি selectedDate কে dd/MM/yyyy ফরম্যাটে রূপান্তরিত করবে এবং HTML-এ প্রদর্শিত হবে।

৫. Moment.js ব্যবহার করে কাস্টম ডেট ফরম্যাট

আপনি যদি Moment.js ব্যবহার করতে চান, তাহলে MatMomentDateModule ব্যবহার করতে হবে। এটি Moment.js এর সাথে Angular Material এর ডেট পিকারকে একত্রিত করতে সহায়তা করে।

প্রথমে, moment এবং @angular/material-moment-adapter ইন্সটল করুন:

npm install moment
npm install @angular/material-moment-adapter

এখন, MatMomentDateModule ব্যবহার করে ডেট পিকার তৈরি করতে পারেন:

import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    MatMomentDateModule
  ]
})
export class AppModule {}

এখন, আপনি Moment.js এর ফরম্যাট ব্যবহার করে ডেট কাস্টমাইজ করতে পারবেন:

import * as moment from 'moment';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
  selectedDate: moment.Moment;

  getFormattedDate() {
    // Moment.js এর মাধ্যমে কাস্টম ফরম্যাট
    return this.selectedDate.format('DD/MM/YYYY');
  }
}

এখানে, getFormattedDate() মেথডটি Moment.js ব্যবহার করে ডেটাকে DD/MM/YYYY ফরম্যাটে কাস্টমাইজ করছে।

Angular Material এর ডেট পিকার কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কাস্টম ডেট ফরম্যাট প্রয়োগ করতে পারেন। Angular's DatePipe বা Moment.js ব্যবহার করে ডেট ফরম্যাট কাস্টমাইজ করা সম্ভব। Angular Material এর ডেট পিকার কম্পোনেন্ট অ্যাপ্লিকেশনে ব্যবহারকারীর জন্য একটি সুন্দর, ইন্টারঅ্যাকটিভ এবং ফাংশনাল ডেট পিকার প্রদান করে, যা ব্যবহারকারীদের জন্য সহজেই তারিখ নির্বাচন এবং প্রদর্শন করার সুযোগ দেয়।