HTML में, डेट पिकर एक उपयोगी इनपुट कंट्रोल है जो उपयोगकर्ताओं को वेबसाइटों या फॉर्म पर विशिष्ट तिथियों का चयन करने में सक्षम बनाता है। डिफ़ॉल्ट रूप से, डेट पिकर किसी भी तारीख को स्वीकार करते हैं, लेकिन आप max एट्रिब्यूट का उपयोग करके चयन योग्य तारीख सीमा को सीमित कर सकते हैं ताकि चयन आज या उससे पहले की तारीखों तक सीमित रहे।
सिंटैक्स
<input type="date" max="YYYY-MM-DD">
डेट पिकर क्या है?
डेट पिकर एक यूजर इंटरफेस घटक है जो उपयोगकर्ताओं को कैलेंडर इंटरफेस के माध्यम से तारीखों का चयन करने की अनुमति देता है। यह आमतौर पर आरक्षण प्रणालियों, शेड्यूलिंग सॉफ्टवेयर, या जन्मतिथि एकत्र करने जैसे अनुप्रयोगों के लिए फॉर्म में उपयोग किया जाता है।
JavaScript के साथ अधिकतम तारीख को आज पर सेट करना
max एट्रिब्यूट को डायनामिक रूप से आज की तारीख पर सेट करने के लिए, आपको वर्तमान तारीख को YYYY-MM-DD प्रारूप में उत्पन्न करने के लिए JavaScript की आवश्यकता होती है।
HTML संरचना
type="date" के साथ एक इनपुट एलिमेंट बनाएं:
<input type="date" id="datepicker">
पूर्ण उदाहरण
यहां JavaScript का उपयोग करके डेट पिकर की अधिकतम चयन योग्य तारीख को आज पर सेट करने का तरीका बताया गया है:
<!DOCTYPE html>
<html>
<head>
<title>अधिकतम तारीख के साथ डेट पिकर</title>
</head>
<body>
<h3>एक तारीख चुनें (अधिकतम: आज)</h3>
<input type="date" id="datepicker">
<script>
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
document.getElementById('datepicker').setAttribute('max', formattedDate);
</script>
</body>
</html>
एक डेट पिकर इनपुट दिखाई देता है जो आज की तारीख सहित केवल आज तक की तारीखों के चयन की अनुमति देता है। भविष्य की तारीखें अक्षम हैं और इन्हें चुना नहीं जा सकता।
JavaScript कैसे काम करता है
JavaScript कोड ये चरण करता है:
- वर्तमान तारीख का प्रतिनिधित्व करने वाला एक नया Date ऑब्जेक्ट बनाता है
- वर्ष, महीना, और दिन घटकों को निकालता है
padStart()का उपयोग करके महीने और दिन को लीडिंग जीरो के साथ फॉर्मेट करता है- उन्हें डेट इनपुट के लिए आवश्यक YYYY-MM-DD प्रारूप में जोड़ता है
- डेट पिकर के max एट्रिब्यूट को सेट करता है
उपयोग के मामले
अधिकतम तारीख को आज तक सीमित करना इसके लिए उपयोगी है:
- बुकिंग सिस्टम जो केवल वर्तमान या पिछली तारीखों के चयन की अनुमति देते हैं
- जन्मदिन या इवेंट पंजीकरण फॉर्म
- डेटा संग्रह फॉर्म जहां भविष्य की तारीखें प्रासंगिक नहीं हैं
- ऐतिहासिक रिकॉर्ड प्रविष्टि सिस्टम
निष्कर्ष
HTML डेट पिकर की अधिकतम तारीख को आज पर सेट करने से उपयोगकर्ताओं को भविष्य की तारीखें चुनने से रोका जाता है। आज की तारीख को YYYY-MM-DD प्रारूप में डायनामिक रूप से उत्पन्न करने के लिए JavaScript का उपयोग करें और रीयल-टाइम तारीख प्रतिबंध के लिए इसे इनपुट के max एट्रिब्यूट पर लागू करें।
