তারিখ সময়

তারিখ সময় ক্ষেত্রটি একটি কাস্টম উইজেটে একটি ক্যালেন্ডার পিকার যোগ করে যা আপনি মাস্টার অ্যাডঅনগুলির সাথে তৈরি করেন৷ উইজেট নির্মাতা। সম্পাদকরা এলিমেন্টরের ক্ষেত্রে ক্লিক করুন, একটি দিন বেছে নিন এবং, যদি আপনি এটির অনুমতি দেন, একটি সময়। উইজেট একটি প্লেইন টেক্সট মান হিসাবে পছন্দ পায় যেমন 2026-10-24 19:30, যা আপনি HTML এ প্রিন্ট করতে পারেন বা একটি কাউন্টডাউন স্ক্রিপ্টে পাস করতে পারেন।

তারিখ সময় একটি প্রো ক্ষেত্র। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে৷ মাস্টার অ্যাডনস প্রো.

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

• এলিমেন্টরে আপনার উইজেটের প্যানেলে একটি তারিখ ইনপুট যোগ করে। এটিতে ক্লিক করলে একটি ক্যালেন্ডার খোলে।
• সঙ্গে সময় সক্ষম করুন চালু, ক্যালেন্ডার নীচে এক ঘন্টা এবং মিনিট সারি পায়। ঘড়ি সবসময় 24 ঘন্টা হয়।
• পাঠ্য হিসাবে বাছাই করা মান সংরক্ষণ করে: Y-m-d H:i (উদাহরণস্বরূপ 2026-10-24 19:30) সময়ের সাথে, বা Y-m-d (2026-10-24) এটা ছাড়া.
• আপনি যেখানেই এর টোকেন রাখেন সেখানেই সেই মানটি প্রিন্ট করে, যেমন {{ event_date }}, HTML, CSS বা JS প্যানেলে।

নির্মাতার কাছে নতুন? পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথমে, তারপর একটি উইজেট খোলা নিয়ে ফিরে আসুন।

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

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• Elementor এবং Master Addons Pro এর জন্য মাস্টার অ্যাডঅন, উভয়ই সক্রিয়। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি “Event Countdown” উইজেট: একটি টেক্সট ফিল্ড নামে event_title, একটি তারিখ সময় ক্ষেত্র নামে event_date, এবং একটি ছোট স্ক্রিপ্ট যা সেই তারিখ পর্যন্ত গণনা করে।

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

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. উপর বিষয়বস্তু ট্যাব, একটি বিভাগ যোগ করুন যদি এখনও একটি না থাকে, উদাহরণস্বরূপ “”।
3. টাইপ করা date বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন তারিখ সময় বিভাগে। সেটিংস খুলতে মাঠের পেন্সিলটিতে ক্লিক করুন।

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

• লেবেল: এলিমেন্টরে ইনপুটের পাশের পাঠ্য, উদাহরণস্বরূপ “ তারিখ”।
• নাম: ক্ষেত্রের অনন্য আইডি এবং এর টোকেনের নাম। উদাহরণস্বরূপ, শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর ব্যবহার করুন event_date.
• বর্ণনা: এলিমেন্টরে ইনপুটের অধীনে দেখানো একটি ইঙ্গিত, যেমন "কাউন্টডাউন শেষ হওয়ার তারিখ এবং সময় বেছে নিন।"
• সময় সক্ষম করুন: ক্যালেন্ডারে ঘন্টা এবং মিনিটের সারি যোগ করে এবং সংরক্ষিত বিন্যাসটি থেকে স্যুইচ করে Y-m-d প্রতি Y-m-d H:i.
• মিনিট বৃদ্ধি: তীরগুলির প্রতিটি ক্লিকের সাথে মিনিটগুলি কতদূর সরে যায়। ডিফল্ট হল 1। 15 দিয়ে, তীরগুলি :00, :15, :30 এবং :45 এর মধ্য দিয়ে যায়।
• ডিফল্ট মান: উইজেটের একটি নতুন অনুলিপি শুরু হওয়ার তারিখ।

ডিফল্ট মান বাক্স একই ক্যালেন্ডার খোলে, তাই আপনি এটি টাইপ করার পরিবর্তে শুরুর তারিখটি বেছে নিন। সময় সক্রিয় করার সময় এখানেও সময় সারি প্রদর্শিত হয়।

একটি কাউন্টডাউনের জন্য, ভবিষ্যতে একটি ডিফল্ট তারিখ চয়ন করুন৷ একটি নতুন উইজেট তারপর শূন্য দেখানোর পরিবর্তে অবিলম্বে গণনা করে।

সাধারণ সেটিংস #

• লেবেল দেখান প্যানেলে লেবেল লুকিয়ে রাখে বা দেখায়।
• লেবেল ব্লক ইনপুটের উপরে তার নিজস্ব লাইনে লেবেল রাখে। আপনার লেবেল দীর্ঘ হলে এটি চালু করুন।
• শর্তাবলী ক্ষেত্রটি তখনই দেখায় যখন অন্য নিয়ন্ত্রণের একটি নির্দিষ্ট মান থাকে, উদাহরণস্বরূপ একটি “Sow countdown” সুইচার৷ দেখা শর্তাবলী.
• বিভাজক নিয়ন্ত্রণের আগে বা পরে একটি বিভাজক রেখা আঁকে।

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

বাছাইকারীর কাছে শুধুমাত্র সময়ের ঘড়ি বা অতীতের তারিখগুলি ব্লক করার জন্য কোনও বিকল্প নেই। সম্পাদকরা যে কোনো দিন বেছে নিতে পারেন।

আপনার টেমপ্লেটে তারিখ ব্যবহার করুন #

যেখানেই তারিখটি উপস্থিত হওয়া উচিত সেখানে টোকেনটি প্রিন্ট করুন। ইভেন্ট কাউন্টডাউন উইজেটে, এইচটিএমএল তারিখটিকে পাঠ্যের একটি লাইনে এবং একটিতে রাখে data-deadline স্ক্রিপ্টটি পড়ে এমন বৈশিষ্ট্য:

<div class="event-card">
  <p class="event-title">{{ event_title }}</p>
  {% if event_date %}
  <p class="event-when">Starts {{ event_date }}</p>
  <div class="event-countdown" data-deadline="{{ event_date }}">
    <span class="days">0</span>d <span class="hours">0</span>h <span class="mins">0</span>m
  </div>
  {% endif %}
</div>

দ্য {% if event_date %} চেক বিষয়। যদি একজন সম্পাদক ইনপুট সাফ করে, টোকেন কিছুই প্রিন্ট করে না। ডিফল্ট মান আবার ব্যবহার করা হয় না, এবং চেক ছাড়া কাউন্টডাউন দেখাবে NaN.

JS প্যানেলে একটি কাউন্টডাউন তৈরি করুন #

JS প্যানেল এই স্ক্রিপ্ট চালায়। এটি প্রতিটি কাউন্টডাউন খুঁজে পায়, সংরক্ষিত পাঠ্যটিকে একটি তারিখে পরিণত করে এবং প্রতি 30 সেকেন্ডে সংখ্যাগুলি আপডেট করে:

document.querySelectorAll(".event-countdown").forEach(function (el) {
  var deadline = new Date(el.dataset.deadline.replace(" ", "T"));
  if (isNaN(deadline)) return;
  function tick() {
    var diff = Math.max(0, deadline - new Date());
    el.querySelector(".days").textContent = Math.floor(diff / 86400000);
    el.querySelector(".hours").textContent = Math.floor(diff / 3600000) % 24;
    el.querySelector(".mins").textContent = Math.floor(diff / 60000) % 60;
  }
  tick();
  setInterval(tick, 30000);
});

• replace(" ", "T") বাঁক 2026-10-24 19:30 মধ্যে 2026-10-24T19:30, একটি বিন্যাস প্রতিটি ব্রাউজার একইভাবে পড়ে।
• isNaN(deadline) তারিখ খালি থাকলে বা পড়া যাবে না তখন স্ক্রিপ্ট বন্ধ করে দেয়।
• একটি ডেটা অ্যাট্রিবিউট থেকে মান পড়া পৃষ্ঠার প্রতিটি উইজেটকে তার নিজস্ব তারিখে গণনা করে রাখে।

টোকেনগুলি সরাসরি JS প্যানেলে কাজ করে। আমাদের পরীক্ষায়, var deadline = "{{ event_date }}"; সংরক্ষিত তারিখ মুদ্রিত। উদ্ধৃতি রাখুন, কারণ একটি খালি তারিখ বৈধ জাভাস্ক্রিপ্ট নয়।

সংরক্ষিত মান কোন সময় অঞ্চল আছে। ব্রাউজার এটিকে ভিজিটরের স্থানীয় সময় হিসাবে পড়ে, তাই 19:30-এর কাউন্টডাউন লন্ডনে 19:30 এবং আবার নিউ ইয়র্কে 19:30-এ শেষ হয়৷ বিশ্বব্যাপী এক মুহূর্তের জন্য, পার্স করার আগে স্ট্রিংটিতে একটি অফসেট যোগ করুন, উদাহরণস্বরূপ 2026-10-24T19:30:00+00:00.

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

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

মাসের নামের একটি ড্রপডাউন আছে এবং বছরটি একটি সংখ্যা বাক্স, তাই মাসগুলি এগিয়ে যেতে খুব বেশি ক্লিক লাগে না৷।

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

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

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

• সম্পাদকরা উইজেট ব্যবহার করার আগে সময় সক্ষম করার সিদ্ধান্ত নিন। আপনি এটি পরিবর্তন করার পরে বাছাই করা তারিখগুলির জন্য বিন্যাস শুধুমাত্র পরিবর্তিত হয়। একটি মান হিসাবে সংরক্ষিত 2026-10-24 19:30 আপনি সময় সক্ষম করুন বন্ধ করার পরেও তার সময় রাখে।
• সর্বদা একটি খালি মান পরিচালনা করুন। মার্কআপটি মুড়ে দিন {% if %} এবং স্ক্রিপ্টে একটি অবৈধ তারিখ পরীক্ষা করুন।
• অতীতের তারিখের জন্য পরিকল্পনা করুন। উদাহরণটি শূন্যে থামে। আপনি উইজেটটি লুকাতে পারেন বা একটি "এই ইভেন্টটি শেষ হয়েছে" বার্তা দেখাতে পারেন।
• 5, 15 বা 30 এর একটি মিনিট বৃদ্ধি ব্যবহার করুন ঘন্টা বা আধা ঘন্টা শুরু হয় যে ঘটনা জন্য।
• একটি পরিষ্কার বর্ণনা লিখুন। তারিখটি শুরু, শেষ বা সময়সীমা কিনা বলুন, তাই সম্পাদকরা সঠিকটি বেছে নিন।

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

মোড়ানো #

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