Datepicker উইজেট jQueryUI-এর একটি জনপ্রিয় ফিচার যা ব্যবহারকারীদের নির্দিষ্ট একটি তারিখ নির্বাচন করতে সহায়তা করে। এটি ফর্মের জন্য একটি অত্যন্ত কার্যকরী উপাদান, যা ব্যবহারকারীদের তারিখের জন্য একটি ক্যালেন্ডার প্রদর্শন করে। এখানে আমরা আলোচনা করব কিভাবে একটি সহজ ডেটাপিকার তৈরি করা যায় jQueryUI ব্যবহার করে।
jQueryUI Datepicker উইজেট ব্যবহার করার পদক্ষেপ
১. প্রাথমিক সেটআপ
প্রথমে, আপনাকে jQuery এবং jQueryUI লাইব্রেরি লোড করতে হবে। এই দুটি স্ক্রিপ্ট আপনার HTML পৃষ্ঠায় অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ:
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI স্টাইল শীট -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI স্ক্রিপ্ট -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
২. HTML ফর্ম তৈরি
ডেটাপিকার উইজেট কাজ করার জন্য একটি ইনপুট ফিল্ড প্রয়োজন, যেখানে ব্যবহারকারী তারিখ নির্বাচন করবেন। উদাহরণস্বরূপ:
<label for="datepicker">তারিখ নির্বাচন করুন:</label>
<input type="text" id="datepicker">
৩. jQuery কোড ব্যবহার
এখন, আপনি jQuery ব্যবহার করে Datepicker উইজেটটি ইনপুট ফিল্ডে যুক্ত করতে পারবেন। নিচের কোডটি আপনার স্ক্রিপ্ট সেকশনে যোগ করুন:
$(document).ready(function() {
$("#datepicker").datepicker();
});
এই কোডটি #datepicker আইডি সহ ইনপুট ফিল্ডে ডেটাপিকার উইজেট যোগ করবে। যখন ব্যবহারকারী ইনপুট ফিল্ডে ক্লিক করবে, তখন একটি ক্যালেন্ডার প্রদর্শিত হবে এবং তারা সেখানে থেকে একটি তারিখ নির্বাচন করতে পারবে।
৪. কাস্টমাইজেশন
jQueryUI Datepicker উইজেট অনেক কাস্টমাইজেশন অপশন প্রদান করে। কিছু সাধারণ কাস্টমাইজেশন হলো:
ডেট ফরম্যাট পরিবর্তন: আপনি ডেটাপিকার উইজেটের তারিখের প্রদর্শন ফরম্যাট পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:
$(document).ready(function() { $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" // তারিখের ফরম্যাট পরিবর্তন }); });সীমিত তারিখ নির্বাচন: আপনি ব্যবহারকারীদের শুধুমাত্র নির্দিষ্ট রেঞ্জের তারিখ নির্বাচন করতে দিতে পারেন:
$(document).ready(function() { $("#datepicker").datepicker({ minDate: new Date(), // আজকের পরের তারিখ থেকে নির্বাচন maxDate: "+1M" // এক মাস পর পর্যন্ত নির্বাচন }); });ডেটাপিকার পরিবর্তনশীল ভাষা: আপনি ডেটাপিকার উইজেটের ভাষা পরিবর্তন করতে পারেন:
$(document).ready(function() { $("#datepicker").datepicker({ regional: "bn" // বাংলা ভাষায় ডেটাপিকার প্রদর্শন }); });
৫. ব্যবহারকারী ইন্টারফেস
একবার কোডিং সম্পন্ন হলে, ব্যবহারকারী যখন ইনপুট ফিল্ডে ক্লিক করবেন, তখন একটি ক্যালেন্ডার সিলেক্টর প্রদর্শিত হবে। তারা সেখান থেকে একটি তারিখ নির্বাচন করতে পারবেন, যা ইনপুট ফিল্ডে প্রদর্শিত হবে।
উপসংহার
jQueryUI Datepicker উইজেট ব্যবহার করে খুব সহজেই একটি তারিখ নির্বাচনকারী ইনপুট ফিল্ড তৈরি করা যায়। এটি ব্যবহারকারীর জন্য তারিখ নির্বাচন প্রক্রিয়া সহজ ও সুবিধাজনক করে তোলে। কাস্টমাইজেশন অপশনের মাধ্যমে আপনি এটি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন, যেমন ডেট ফরম্যাট, সীমিত তারিখ রেঞ্জ, ভাষা পরিবর্তন ইত্যাদি।
Read more
