তারিখ সময়

দ্য তারিখ সময় ক্ষেত্র একটি কাস্টম উইজেটকে একটি ফ্রি-টেক্সট তারিখ বাক্সের পরিবর্তে একটি সঠিক ক্যালেন্ডার পিকার দেয়৷ সম্পাদকরা এলিমেন্টরের ক্ষেত্রে ক্লিক করেন, একটি ফ্ল্যাটপিকার ক্যালেন্ডার খোলে এবং তারা আপনার উইজেটটি যে বিন্যাসটি আশা করে তা টাইপ করার বিষয়ে চিন্তা না করে একটি তারিখ (এবং ঐচ্ছিকভাবে একটি সময়) বেছে নেয়। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, সেই সামঞ্জস্য হল পুরো পয়েন্ট: মানটি সর্বদা একটি অনুমানযোগ্য বিন্যাসে আসে আপনার টেমপ্লেট এবং স্ক্রিপ্ট নির্ভর করতে পারে।

তারিখ সময় ক্ষেত্র সমর্থন করে শর্তাবলী প্রতিটি নিয়ন্ত্রণ মত, এবং এর মান মাধ্যমে প্রিন্ট টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন, তাই আপনি এটি তুলনা করতে পারেন বা এটি মোড়ানো করতে পারেন {% if %} আপনার টেমপ্লেটে ব্লক। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।

ক্ষেত্রটি প্রতিটি সাধারণ মান ক্ষেত্রের মতো একটি টোকেনের মাধ্যমে সংযোগ করে। প্রিন্ট {{ event_date }} HTML প্যানেলে তারিখটি প্রদর্শন করতে, অথবা JS প্যানেলে হস্তান্তর করুন যেখানে একটি কাউন্টডাউন, একটি খোলার সময় চেক, বা একটি শিডিউলিং স্ক্রিপ্ট এটি পার্স করতে পারে।

তারিখ সময় ক্ষেত্র কি করে #

• উইজেটের এলিমেন্টর প্যানেলে একটি ক্লিক-টু-ওপেন ক্যালেন্ডার পিকার (ফ্ল্যাটপিকার) রেন্ডার করে।
• ঐচ্ছিকভাবে ক্যালেন্ডারের পাশাপাশি একটি সময় নির্বাচক অন্তর্ভুক্ত করে।
• পিকটিকে একটি ফরম্যাটেড স্ট্রিং হিসাবে সংরক্ষণ করে, যা স্বাভাবিক করা হয় Y-m-d H:i সময় সক্রিয় বা সঙ্গে Y-m-d এটা ছাড়া।
• HTML, CSS, বা JS প্যানেলের মাধ্যমে যে কোনো জায়গায় সেই স্ট্রিং প্রিন্ট করে {{ your_field_name }}.
• জাভাস্ক্রিপ্ট সরাসরি ফিড করে, কাউন্টডাউন এবং সময়সূচী উইজেটের জন্য স্বাভাবিক রুট।

যদি কাস্টম উইজেটগুলি নতুন অঞ্চল হয়, উইজেট নির্মাতা ওভারভিউ ভাল শুরু বিন্দু; এই পৃষ্ঠাটি অনুমান করে যে আপনি সম্পাদকের চারপাশে আপনার পথ জানেন।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি ইভেন্ট কাউন্টডাউন উইজেট যার নাম একটি তারিখ সময় ক্ষেত্র event_date যে উইজেট এর স্ক্রিপ্ট নিচে গণনা।

কিভাবে একটি তারিখ সময় ক্ষেত্র যোগ করতে হয় #

টেনে আনুন তারিখ সময় ক্ষেত্র প্যানেল থেকে ক্ষেত্র অধীনে একটি বিভাগে বিষয়বস্তু ট্যাব। এটি অবতরণ করার পরে এটির বিকল্পগুলি বাম দিকে খোলে।

তারিখ সময় ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #

• লেবেল: এলিমেন্টরে পিকারের পাশে দেখানো পাঠ্য, উদাহরণস্বরূপ “Event Date”।
• নাম: আপনার টেমপ্লেটগুলি যে অনন্য শনাক্তকারীকে উল্লেখ করে। অক্ষর, সংখ্যা, এবং আন্ডারস্কোর শুধুমাত্র, উদাহরণস্বরূপ event_date.
• ডিফল্ট: শুরুর তারিখ স্ট্রিং উইজেট জাহাজের সাথে।
• সময় সক্ষম করুন: ক্যালেন্ডারে এক ঘন্টা এবং মিনিট নির্বাচক যোগ করে। এটি চালু করার সাথে সাথে, মানগুলি হিসাবে বেরিয়ে আসে Y-m-d H:i (লাইক 2026-12-31 18:00); এটি বন্ধ সঙ্গে, একটি সমতল হিসাবে Y-m-d তারিখ।
• মিনিট বৃদ্ধি: মিনিট নির্বাচক যে ধাপে চলে যায়, তাই সম্পাদকরা 5, 15 বা 30 মিনিটের স্লটে সীমাবদ্ধ থাকতে পারে।
• বর্ণনা, লেবেল দেখান, বিভাজক: স্ট্যান্ডার্ড ডিসপ্লে অপশন, প্লাস ফিল্ড দেখানোর শর্ত শুধুমাত্র যখন অন্য কন্ট্রোলের একটি নির্দিষ্ট মান থাকে।

হুডের নিচে বাছাইকারী একটি গ্রহণ করে picker_options আরও Flatpickr সেটিংস সহ অবজেক্ট, সহ noCalendar শুধুমাত্র সময়ের জন্য বাছাইকারীর জন্য, dateFormat, time_24hr, এবং minDate/maxDate সীমানা। বিল্ডার UI সাধারণগুলি রাখে, সময় এবং মিনিট বৃদ্ধি সক্ষম করুন, সামনে এবং কেন্দ্রে, এবং রানটাইম সঞ্চিত মানগুলিকে যে কোনও উপায়ে উপরের দুটি ফর্ম্যাটে স্বাভাবিক করে তোলে।

তারিখ সময় ক্ষেত্রটিকে এর টোকেনের সাথে সংযুক্ত করুন #

তারিখ সময় ক্ষেত্র একটি টোকেন ক্ষেত্র। তারিখটি প্রদর্শন করা HTML প্যানেলে একটি টোকেন:

<p class="event-when">Doors open {{ event_date }}</p>

আরো সাধারণ তারের JS প্যানেল হয়। কারণ মান একটি স্থিতিশীল Y-m-d H:i স্ট্রিং, জাভাস্ক্রিপ্ট এটি পার্স করতে পারে এবং একটি কাউন্টডাউন চালাতে পারে:

// JS panel
var deadline = new Date("{{ event_date }}".replace(" ", "T"));

var timer = setInterval(function () {
  var diff = deadline - new Date();
  if (diff <= 0) { clearInterval(timer); return; }
  var days  = Math.floor(diff / 86400000);
  var hours = Math.floor((diff % 86400000) / 3600000);
  document.querySelector(".event-countdown").textContent =
    days + "d " + hours + "h";
}, 1000);

একটি আন্তর্জাতিক লঞ্চের আগে জানার মতো একটি জিনিস: পার্স করা তারিখে কোনও টাইমজোন সংযুক্ত নেই, তাই new Date() প্রতিটি দর্শকের স্থানীয় সময়ে এটি ব্যাখ্যা করে। "18:00" এর একটি কাউন্টডাউন বার্লিনে 18:00 এ এবং আবার নিউ ইয়র্কে 18:00 এ শেষ হয়৷ একটি একক বিশ্বব্যাপী সময়সীমার জন্য, একটি সুস্পষ্ট অফসেট যুক্ত করুন +00:00 পার্স করার আগে স্ট্রিং এ।

সতর্ক থেকো: টোকেন একটি প্লেইন স্ট্রিং প্রিন্ট করে, তাই জাভাস্ক্রিপ্টে উদ্ধৃত করুন। var deadline = "{{ event_date }}"; কাজ করে; উদ্ধৃতি ছাড়া রেন্ডার করা মান একটি সিনট্যাক্স ত্রুটি। এবং যেহেতু ফরম্যাটটি Enable Time সেটিং দ্বারা স্থির করা হয়েছে, তাই আপনার স্ক্রিপ্ট আশা করে কিনা তা সামনে রেখে সিদ্ধান্ত নিন 2026-12-31 বা 2026-12-31 18:00, তারপর টগলটি এর সাথে সামঞ্জস্যপূর্ণ রাখুন।

Elementor এ তারিখ সময় নিয়ন্ত্রণ ব্যবহার করুন #

Elementor-এর একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। ক্ষেত্রটি আপনার লেবেলের অধীনে একটি পাঠ্য-শৈলী ইনপুট হিসাবে দেখায়; এটিতে ক্লিক করলে ক্যালেন্ডার পপওভার খোলে।

একটি দিন বেছে নিন, এবং সময় সক্ষম করুন, ক্যালেন্ডারের নীচে ঘন্টা এবং মিনিট সেট করুন। ইনপুট ফরম্যাট করা মান এবং প্রিভিউ আপডেট দিয়ে পূর্ণ হয়। সম্পাদকরা কখনই হাতে তারিখ টাইপ করেন না, তাই আপনার স্ক্রিপ্ট পার্স যে বিন্যাসটি আসে তা সর্বদা আসে।

সাধারণ ব্যবহারের ক্ষেত্রে #

• কাউন্টডাউন উইজেট লঞ্চ, বিক্রয় এবং ইভেন্টের জন্য, JS প্যানেল গণিত করছে।
• ইভেন্ট কার্ড এটি একটি স্থান এবং শিরোনামের পাশে একটি বিন্যাসিত তারিখ মুদ্রণ করে।
• সীমিত-অফার ব্যানার সময়সীমা পেরিয়ে গেলে একটি স্ক্রিপ্ট লুকিয়ে থাকে।
• বুকিং এবং সময়সূচী প্রদর্শন যেখানে খোলার বা বন্ধ করার সময় মার্কআপ ফিড করে।
• “” শৈলী মেটাডেটাতে প্রকাশিত কাস্টম কন্টেন্ট উইজেট জন্য।

তারিখ সময় ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• কাজের সময় সক্ষম করুন। একটি কাউন্টডাউন সময় উপাদান প্রয়োজন; একটি "প্রকাশিত অন" লাইন করে না। সংরক্ষিত বিন্যাস টগল অনুসরণ করে।
• JS-এ টোকেন উদ্ধৃত করুন। মানটি একটি স্ট্রিং, এবং উদ্ধৃত তারিখগুলি স্ক্রিপ্টটি রেন্ডার করার মুহুর্তে ভেঙে দেয়।
• পার্স করার আগে স্বাভাবিক করুন। সঙ্গে স্থান প্রতিস্থাপন T, কাউন্টডাউন উদাহরণ হিসাবে, রাখে new Date() ব্রাউজার জুড়ে সামঞ্জস্যপূর্ণ পার্সিং।
• ভবিষ্যতে একটি ডিফল্ট সেট করুন কাউন্টডাউন উইজেটগুলির জন্য, তাই শূন্য দেখানোর পরিবর্তে একটি নতুন ড্রপ গণনা করা হয়।
• শব্দ কমাতে মিনিট বৃদ্ধি ব্যবহার করুন। নির্বিচারে মিনিটের চেয়ে পনের মিনিটের ধাপগুলি বাছাই করা এবং পড়া সহজ।
• অতীত সামলাও। সময়সীমা পেরিয়ে গেলে কী হবে তা স্ক্রিপ্টে সিদ্ধান্ত নিন: উইজেটটি লুকান, একটি বার্তা দেখান বা শূন্যে থামুন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

উইজেট বিল্ডার ডেট টাইম ফিল্ড সম্পাদকদের হাত থেকে ডেট এন্ট্রি নেয় এবং আপনার মধ্যে একটি অনুমানযোগ্য স্ট্রিং রাখে: প্যানেলে একটি পিকার, টেমপ্লেটে একটি টোকেন এবং ফর্ম্যাট যা স্ক্রিপ্টগুলি প্রতিরক্ষামূলক কোড ছাড়াই পার্স করতে পারে৷ এর সাথে পেয়ার করুন সুইচার ক্ষেত্র মেয়াদোত্তীর্ণ-রাষ্ট্র আচরণ টগল করতে, বা সংখ্যা ক্ষেত্র টিউনযোগ্য রিফ্রেশ বিরতির জন্য। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।