दिनांक समय

दिनांक समय फ़ील्ड आपके द्वारा मास्टर ऐडऑन के साथ बनाए गए कस्टम विजेट में एक कैलेंडर पिकर जोड़ता है विजेट बिल्डरसंपादक एलिमेंटर में फ़ील्ड पर क्लिक करें, एक दिन चुनें और, यदि आप इसे अनुमति देते हैं, तो एक समय विजेट को सादे पाठ मान के रूप में विकल्प मिलता है जैसे कि 2026-10-24 19:30है, जिसे आप एचटीएमएल में प्रिंट कर सकते हैं या उलटी गिनती स्क्रिप्ट में पास कर सकते हैं।

दिनांक समय एक प्रो क्षेत्र है मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.

दिनांक समय फ़ील्ड क्या करता है #

• एलिमेंटर में आपके विजेट के पैनल में एक दिनांक इनपुट जोड़ता है इसे क्लिक करने से एक कैलेंडर खुलता है।
• साथ समय सक्षम करें पर, कैलेंडर को नीचे एक घंटे और मिनट की पंक्ति मिलती है घड़ी हमेशा २४ घंटे होती है।
• चुने गए मान को पाठ के रूप में सहेजता हैः Y-m-d H:i (उदाहरण के लिए 2026-10-24 19:30) समय के साथ, या Y-m-d (2026-10-24) इसके बिना.
• आप जहां भी इसका टोकन रखते हैं, उस मान को प्रिंट करता है, जैसे {{ event_date }}, HTML, CSS या JS पैनल में।

बिल्डर के लिए नया? पढ़ें विजेट बिल्डर अवलोकन सबसे पहले, फिर एक विजेट खुला के साथ वापस आओ।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक “इवेंट काउंटडाउन” विजेट है: एक टेक्स्ट फ़ील्ड नामित event_title, एक दिनांक समय फ़ील्ड नामित event_dateऔर एक छोटी स्क्रिप्ट जो उस तारीख तक गिनती है।

दिनांक समय फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. पर सामग्री टैब, यदि अभी तक कोई अनुभाग नहीं है तो एक अनुभाग जोड़ें, उदाहरण के लिए “Event”।
3. प्रकार date बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना दिनांक समय अनुभाग में इसकी सेटिंग्स खोलने के लिए मैदान पर पेंसिल पर क्लिक करें।

दिनांक समय फ़ील्ड विकल्प समझाया गया #

• लेबलः एलिमेंटर में इनपुट के बगल में पाठ, उदाहरण के लिए “Event Date”।
• नाम: क्षेत्र की विशिष्ट आईडी और इसके टोकन का नाम उदाहरण के लिए, केवल अक्षरों, संख्याओं और अंडरस्कोर का उपयोग करें event_date.
• विवरण: एलिमेंटर में इनपुट के तहत दिखाया गया एक संकेत, जैसे “ उलटी गिनती समाप्त होने की तारीख और समय चुनें।”
• समय सक्षम करेंः कैलेंडर में घंटे और मिनट की पंक्ति जोड़ता है और सहेजे गए प्रारूप को स्विच करता है Y-m-d को Y-m-d H:i.
• मिनट वृद्धिः तीर के प्रत्येक क्लिक के साथ मिनट कितनी दूर तक जाते हैं डिफ़ॉल्ट १ है १५ के साथ, तीर चरण:००, १५, ३० और ४५।
• डिफ़ॉल्ट मानः विजेट की नई प्रति प्रारंभ होने की तिथि।

डिफ़ॉल्ट मान बॉक्स एक ही कैलेंडर खोलता है, इसलिए आप इसे टाइप करने के बजाय प्रारंभिक तिथि चुनते हैं समय पंक्ति यहां भी दिखाई देती है जब समय सक्षम करें चालू है।

उलटी गिनती के लिए, भविष्य में एक डिफ़ॉल्ट तिथि चुनें एक नया विजेट फिर शून्य दिखाने के बजाय तुरंत नीचे गिना जाता है।

सामान्य सेटिंग्स #

• लेबल दिखाएँ पैनल में लेबल छुपाता है या दिखाता है।
• लेबल ब्लॉक इनपुट के ऊपर लेबल को अपनी लाइन पर रखता है यदि आपका लेबल लंबा है तो इसे चालू करें।
• शर्तों फ़ील्ड को केवल तभी दिखाता है जब किसी अन्य नियंत्रण का एक निश्चित मान होता है, उदाहरण के लिए “ काउंटडाउन” स्विचर दिखाएं शर्तों.
• विभाजक नियंत्रण से पहले या बाद में एक विभाजक रेखा खींचता है।

उत्तरदायी नियंत्रण, गतिशील समर्थन, फ्रंटेंड उपलब्ध, नियंत्रण कक्षाएं और चयनकर्ता हर क्षेत्र पर दिखाई देते हैं आपको इस गाइड में सेटअप के लिए उनमें से किसी की भी आवश्यकता नहीं है, और चयनकर्ता खाली रह सकता है क्योंकि एक तिथि पिकर सीएसएस नहीं लिखता है।

पिकर के पास केवल समय वाली घड़ी या पिछली तारीखों को ब्लॉक करने का कोई विकल्प नहीं है। संपादक किसी भी दिन चुन सकते हैं।

अपने टेम्पलेट में दिनांक का उपयोग करें #

टोकन को प्रिंट करें जहां भी तारीख दिखाई देनी चाहिए घटना उलटी गिनती विजेट में, एचटीएमएल पाठ की एक पंक्ति में और एक में तारीख डालता है 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.

जेएस पैनल में उलटी गिनती बनाएं #

जेएस पैनल इस स्क्रिप्ट को चलाता है यह प्रत्येक उलटी गिनती पाता है, सहेजे गए पाठ को एक तारीख में बदल देता है, और हर ३० सेकंड में संख्याओं को अपडेट करता हैः

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) जब तारीख खाली हो या पढ़ी न जा सके तो स्क्रिप्ट बंद कर देता है।
• डेटा विशेषता से मान पढ़ने से पृष्ठ पर प्रत्येक विजेट अपनी तिथि तक गिनता रहता है।

टोकन भी सीधे जेएस पैनल में काम करते हैं हमारे परीक्षणों में, var deadline = "{{ event_date }}"; सहेजी गई तारीख मुद्रित करें उद्धरण रखें, क्योंकि एक नंगे तारीख मान्य जावास्क्रिप्ट नहीं है।

सहेजे गए मूल्य का कोई समय क्षेत्र नहीं है ब्राउज़र इसे आगंतुक के स्थानीय समय के रूप में पढ़ता है, इसलिए १९:३० की उलटी गिनती लंदन में १९:३० बजे समाप्त होती है और फिर से न्यूयॉर्क में १९:३० बजे समाप्त होती है, उदाहरण के लिए, एक विश्वव्यापी क्षण के लिए, पार्सिंग से पहले स्ट्रिंग में एक ऑफसेट जोड़ें 2026-10-24T19:30:00+00:00.

एलिमेंट में दिनांक समय नियंत्रण का उपयोग करें #

विजेट को किसी पृष्ठ पर जोड़ें, या यदि पृष्ठ पहले से ही खुला था तो संपादक को पुनः लोड करें फ़ील्ड पर बैठता है सामग्री अपने लेबल के तहत टैब कैलेंडर खोलने के लिए इनपुट पर क्लिक करें, एक दिन चुनें, फिर नीचे पंक्ति में घंटे और मिनट सेट करें जैसे ही आप चुनते हैं पूर्वावलोकन अपडेट।

महीने के नाम में एक ड्रॉपडाउन है और वर्ष एक नंबर बॉक्स है, इसलिए आगे बढ़ने वाले महीनों में बहुत अधिक क्लिक नहीं होते हैं।

सामान्य उपयोग के मामले #

• लॉन्च, बिक्री और वेबिनार के लिए उलटी गिनती।
• इवेंट कार्ड जो शीर्षक और स्थान के बगल की तारीख दिखाते हैं।
• बैनर प्रदान करें कि एक स्क्रिप्ट समय सीमा बीत जाने के बाद छुपाती है।
• खोलने या बंद करने का समय शेड्यूल विजेट में मुद्रित होता है।

दिनांक समय क्षेत्र के साथ काम करने के लिए युक्तियाँ #

• संपादकों द्वारा विजेट का उपयोग करने से पहले समय सक्षम करें पर निर्णय लें। प्रारूप केवल आपके द्वारा स्विच करने के बाद चुनी गई तिथियों के लिए बदलता है एक मान के रूप में सहेजा गया 2026-10-24 19:30 इनेबल टाइम ऑफ करने के बाद भी अपना समय बनाए रखता है।
• हमेशा एक खाली मान संभालें। मार्कअप को लपेटें {% if %} और स्क्रिप्ट में एक अमान्य तारीख की जांच करें।
• अतीत में तारीखों के लिए योजना। उदाहरण शून्य पर रुक जाता है आप विजेट को छिपा भी सकते हैं या एक “दि ईवेंट समाप्त हो गया हैसंदेश।
• 5, 15 या 30 की मिनट वृद्धि का उपयोग करें उन घटनाओं के लिए जो घंटे या आधे घंटे से शुरू होती हैं।
• एक स्पष्ट विवरण लिखें। कहें कि तारीख शुरू है, अंत है या समय सीमा है, इसलिए संपादक सही समय चुनें।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

सामग्री अनुभाग में दिनांक समय फ़ील्ड जोड़ें, चुनें कि क्या इसे समय की आवश्यकता है, और प्रिंट करें {{ event_date }} अपने एचटीएमएल में या जेएस पैनल में इसे पढ़ें खाली मूल्यों की जांच करें और विजेट तब पकड़ता है जब कोई संपादक तारीख को साफ करता है इसे इसके साथ जोड़ दें स्विचर फ़ील्ड संपादकों को उलटी गिनती छिपाने और देखने की अनुमति देने के लिए मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।