ডেট এবং কারেন্সি ফরম্যাটিং

Vue.js অ্যাপ্লিকেশন তৈরির সময় অনেক ক্ষেত্রেই ডেট এবং কারেন্সি ডেটার ফরম্যাটিং প্রয়োজন হয়। এই প্রক্রিয়াগুলি সহজে করতে Vue.js কিছু বিল্ট-ইন মেথড এবং প্লাগইন প্রদান করে। এখানে আমরা ডেট এবং কারেন্সি ফরম্যাটিং করার কিছু সাধারণ পদ্ধতি আলোচনা করব।

১. ডেট ফরম্যাটিং

ডেট ফরম্যাটিং করার জন্য Vue.js এর মধ্যে সরাসরি কোনো বিল্ট-ইন ফিচার নেই, তবে আপনি JavaScript এর Intl.DateTimeFormat অথবা Moment.js লাইব্রেরি ব্যবহার করে সহজেই ডেটা ফরম্যাট করতে পারেন। এছাড়া, Vue.js এর filters (Vue 2.x এ) এবং computed properties (Vue 3.x এ) ব্যবহার করে ফরম্যাটিং করা যেতে পারে।

১.১. Intl.DateTimeFormat ব্যবহার করা

Intl.DateTimeFormat হল JavaScript এর একটি বিল্ট-ইন API যা আপনাকে আন্তর্জাতিক স্ট্যান্ডার্ডে ডেটা ফরম্যাট করতে সাহায্য করে।

<template>
  <div>
    <p>{{ formatDate(currentDate) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Intl.DateTimeFormat('en-US', options).format(date);
    }
  }
};
</script>

এখানে, Intl.DateTimeFormat এর মাধ্যমে ডেটাকে ফরম্যাট করা হয়েছে, এবং এটি month-day-year ফরম্যাটে ডেটা দেখাবে।

১.২. Moment.js ব্যবহার করা

Moment.js একটি জনপ্রিয় লাইব্রেরি যা ডেটা ফরম্যাটিং, প্যারসিং এবং ম্যনিপুলেশনে সহায়তা করে। এটি Vue.js অ্যাপ্লিকেশনের সাথে সহজে ইন্টিগ্রেট করা যায়।

Moment.js ইনস্টল করুন:

npm install moment

Moment.js ব্যবহার করার উদাহরণ:

<template>
  <div>
    <p>{{ formatDate(currentDate) }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    formatDate(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
};
</script>

এখানে, moment(date).format() ব্যবহার করে ডেটা একটি নির্দিষ্ট ফরম্যাটে রেন্ডার করা হয়েছে, যেমন "September 15th 2021, 5:00:00 pm"।

১.৩. Vue 3.x এ computed পদ্ধতি ব্যবহার করা

Vue 3.x এ, আপনি computed properties ব্যবহার করে ডেটা ফরম্যাটিং করতে পারেন।

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  computed: {
    formattedDate() {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Intl.DateTimeFormat('en-US', options).format(this.currentDate);
    }
  }
};
</script>

এখানে computed প্রপার্টি ব্যবহার করে ডেটা ফরম্যাটিং করা হয়েছে।

২. কারেন্সি ফরম্যাটিং

কারেন্সি ফরম্যাটিং করার জন্য Vue.js এ Intl.NumberFormat বা Number.toLocaleString() ব্যবহার করা যেতে পারে। এই API গুলি ডেটার ফরম্যাটিং এবং কারেন্সি সিম্বল যুক্ত করার জন্য খুবই কার্যকরী।

২.১. Intl.NumberFormat ব্যবহার করা

Intl.NumberFormat ব্যবহার করে সহজেই কারেন্সি ফরম্যাট করা যায়।

<template>
  <div>
    <p>{{ formatCurrency(amount) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 12345.67
    };
  },
  methods: {
    formatCurrency(value) {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      }).format(value);
    }
  }
};
</script>

এখানে, Intl.NumberFormat দিয়ে $12,345.67 এর মতো একটি কারেন্সি ফরম্যাট তৈরি করা হয়েছে।

২.২. Number.toLocaleString() ব্যবহার করা

Number.toLocaleString() একটি বিল্ট-ইন জাভাস্ক্রিপ্ট ফাংশন যা সংখ্যাকে কারেন্সি ফরম্যাটে রূপান্তর করতে সহায়তা করে।

<template>
  <div>
    <p>{{ formatCurrency(amount) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 98765.43
    };
  },
  methods: {
    formatCurrency(value) {
      return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
    }
  }
};
</script>

এখানে, .toLocaleString('en-US', { style: 'currency', currency: 'USD' }) ব্যবহার করে $98,765.43 এর মতো কারেন্সি ফরম্যাট করা হয়েছে।

৩. Vue.js Filters (Vue 2.x)

Vue 2.x এ আপনি filters ব্যবহার করে ডেটা ফরম্যাটিং করতে পারেন। এটি বিশেষভাবে ইউজার ইন্টারফেসে ডেটা প্রেজেন্টেশন ফরম্যাট করার জন্য উপযোগী।

// main.js or a component
Vue.filter('currency', function(value) {
  return '$' + value.toLocaleString();
});

// In the template
<template>
  <div>
    <p>{{ 12345.67 | currency }}</p>
  </div>
</template>

এখানে, currency নামক একটি filter তৈরি করা হয়েছে যা সংখ্যা গুলোকে ডলার ফরম্যাটে রূপান্তর করবে।

সারাংশ

• ডেট ফরম্যাটিং: Vue.js এ ডেটা ফরম্যাটিং করতে Intl.DateTimeFormat বা Moment.js ব্যবহার করা যায়। এটি আপনাকে ডেটাকে একটি নির্দিষ্ট আন্তর্জাতিক স্ট্যান্ডার্ডে রূপান্তর করতে সহায়তা করে।
• কারেন্সি ফরম্যাটিং: Intl.NumberFormat অথবা Number.toLocaleString() ব্যবহার করে আপনি সহজেই কারেন্সি ডেটা ফরম্যাট করতে পারবেন।
• Vue Filters (Vue 2.x): Vue 2.x এ filters ব্যবহার করে সহজেই ডেটা ফরম্যাট করা যায়, যা ইউজার ইন্টারফেসে ডেটার প্রেজেন্টেশন সহজ করে তোলে।

এই পদ্ধতিগুলোর মাধ্যমে আপনি Vue.js অ্যাপ্লিকেশনে ডেটা এবং কারেন্সি ফরম্যাটিং খুব সহজেই করতে পারবেন, যা ইউজারের অভিজ্ঞতা উন্নত করে।