दिनांक समय

द दिनांक समय फ़ील्ड एक कस्टम विजेट को एक फ्री-टेक्स्ट डेट बॉक्स के बजाय एक उचित कैलेंडर पिकर देता है संपादक एलिमेंटर में फ़ील्ड पर क्लिक करते हैं, एक फ्लैटपिकर कैलेंडर खुलता है, और वे एक तारीख (और वैकल्पिक रूप से एक समय) चुनते हैं, जो आपके विजेट की अपेक्षा के प्रारूप को टाइप करने के बारे में मास्टर एडॉन्स के अंदर विजेट बिल्डर, वह स्थिरता संपूर्ण बिंदु है: मान हमेशा एक पूर्वानुमानित प्रारूप में आता है जिस पर आपका टेम्पलेट और स्क्रिप्ट भरोसा कर सकते हैं।

दिनांक समय फ़ील्ड समर्थन करता है शर्तों हर नियंत्रण की तरह, और इसका मूल्य प्रिंट होता है ट्विग-सिंटैक्स टेम्पलेट इंजनू ी है, तो आप इसकी तुलना कर सकते हैं या इसे लपेट सकते हैं {% 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 आगे फ़्लैटपिकर सेटिंग्स के साथ ऑब्जेक्ट, जिसमें शामिल हैं noCalendar केवल समय लेने वाले के लिए, dateFormat, time_24hr, और minDate/maxDate सीमाएं बिल्डर यूआई सामान्य लोगों को रखता है, समय और मिनट वृद्धि, सामने और केंद्र सक्षम करें, और रनटाइम किसी भी तरह से ऊपर दो प्रारूपों में संग्रहीत मूल्यों को सामान्य करता है।

दिनांक समय फ़ील्ड को उसके टोकन से कनेक्ट करें #

दिनांक समय फ़ील्ड एक टोकन फ़ील्ड है दिनांक प्रदर्शित करना एचटीएमएल पैनल में एक टोकन हैः

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

अधिक सामान्य वायरिंग जेएस पैनल है क्योंकि मूल्य एक स्थिर है 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() प्रत्येक आगंतुक के स्थानीय समय में इसकी व्याख्या करता है बर्लिन में १८:०० बजे और फिर न्यूयॉर्क में १८:०० बजे समाप्त होने वाले “१८:००” की उलटी गिनती एक एकल वैश्विक समय सीमा के लिए, एक स्पष्ट ऑफसेट जैसे संलग्न करें +00:00 पार्सिंग से पहले स्ट्रिंग को।

सावधान रहें: टोकन एक सादे स्ट्रिंग को प्रिंट करता है, इसलिए इसे जावास्क्रिप्ट में उद्धृत करें। var deadline = "{{ event_date }}"; काम करता है; उद्धरणों के बिना प्रस्तुत मूल्य एक सिंटैक्स त्रुटि है। और चूंकि प्रारूप सक्षम समय सेटिंग द्वारा तय किया गया है, इसलिए पहले से तय करें कि आपकी स्क्रिप्ट अपेक्षा करती है या नहीं 2026-12-31 या 2026-12-31 18:00, फिर टॉगल को उसके अनुरूप रखें।

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

एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें, या संपादक को फिर से लोड करें यदि पृष्ठ पहले से ही खुला था फ़ील्ड आपके लेबल के तहत टेक्स्ट-शैली इनपुट के रूप में दिखाता है; इसे क्लिक करने से कैलेंडर पॉपओवर खुल जाता है।

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

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

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

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

• कार्य के लिए समय सक्षम करें मिलान करें। उलटी गिनती के लिए समय घटक की आवश्यकता होती है; एक “publised on” लाइन नहीं है। संग्रहीत प्रारूप टॉगल का अनुसरण करता है।
• जेएस में टोकन उद्धृत करें। मान एक स्ट्रिंग है, और गैर-उद्धृत तिथियां स्क्रिप्ट को उसी क्षण तोड़ देती हैं जब वह प्रस्तुत करती है।
• पार्सिंग से पहले सामान्य करें। के साथ अंतरिक्ष को बदलना T, जैसा कि उलटी गिनती उदाहरण में है, रखता है new Date() ब्राउज़रों में सुसंगत पार्सिंग।
• भविष्य में एक डिफ़ॉल्ट सेट करें उलटी गिनती विजेट के लिए, इसलिए एक ताजा बूंद शून्य दिखाने के बजाय नीचे गिनती है।
• शोर को कम करने के लिए मिनट वृद्धि का उपयोग करें। मनमाने मिनटों की तुलना में पंद्रह मिनट के चरणों को चुनना और पढ़ना आसान है।
• अतीत को संभालो। स्क्रिप्ट में तय करें कि समय सीमा बीत जाने पर क्या होता है: विजेट छिपाएं, संदेश दिखाएं, या शून्य पर रुकें।

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

लपेटकर #

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