HTML Date Picker Tag
Home
HTML Course
Learn HTML

 

HTML Date Picker Tag


📌 HTML Date Picker Tag क्या है?

  • HTML में Date चुनने के लिए <input type="date"> टैग का उपयोग किया जाता है।

  • इसे Date Picker कहते हैं, क्योंकि इसमें User Calendar से तारीख़ चुन सकता है।

  • यह HTML5 का हिस्सा है।


✨ Main Features of Date Picker

  1. User को Calendar से Date Select करने की सुविधा मिलती है।

  2. Date Format Default Browser और System के अनुसार होता है।

  3. Extra Attributes से Date Picker को Customize किया जा सकता है।


✅ Basic Example: Date Picker

<!DOCTYPE html>
<html>
<head>
    <title>Date Picker Example</title>
</head>
<body>
    <h1>AJ Computer Education</h1>

    <form>
        <label for="dob">अपनी जन्मतिथि चुनें:</label>
        <input type="date" id="dob" name="dob">
        <br><br>
        <button type="submit">Submit</button>
    </form>

</body>
</html>

👉 इस Example में User अपनी Date of Birth चुन सकता है।


🛠️ Date Picker Attributes (Important)

AttributeकामExample
minMinimum Date सेट करता है<input type="date" min="2025-01-01">
maxMaximum Date सेट करता है<input type="date" max="2025-12-31">
valueDefault Date सेट करता है<input type="date" value="2025-08-16">
requiredMandatory Field बनाता है<input type="date" required>


✅ Example with min & max Dates

<form>
    <label for="join">Joining Date चुनें:</label>
    <input type="date" id="join" name="join" min="2025-01-01" max="2025-12-31">
    <button type="submit">Submit</button>
</form>

👉 इस Example में User सिर्फ़ 2025 के अंदर ही Date चुन सकता है।



📌 Note: Date Picker का Design Browser और Device के हिसाब से थोड़ा अलग दिख सकता है।

Post a Comment

Post a Comment