HTML Time Picker


📌 HTML Time Picker क्या है?

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

  • इसे Time Picker कहते हैं क्योंकि इसमें User घंटे और मिनट (HH:MM) चुन सकता है।

  • यह HTML5 का Feature है।


✨ Main Features of Time Picker

  1. User Clock से Time चुन सकता है।

  2. Default Format HH:MM (24-Hour Format) होता है।

  3. Attributes (min, max, step) से Control किया जा सकता है।

  4. Browser और Device के हिसाब से Design अलग हो सकता है (Mobile पर Digital Clock जैसा दिखेगा)।


✅ Basic Example: Time Picker

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

    <form>
        <label for="classTime">Class Time चुनें:</label>
        <input type="time" id="classTime" name="classTime">
        <br><br>
        <button type="submit">Submit</button>
    </form>

</body>
</html>

👉 इसमें User Class का Time चुन पाएगा।


🛠️ Time Picker Attributes

AttributeकामExample
minMinimum Time सेट करता है<input type="time" min="09:00">
maxMaximum Time सेट करता है<input type="time" max="18:00">
stepSeconds या Minutes के Gap सेट करता है<input type="time" step="600"> (हर 10 मिनट पर Time Select होगा)
valueDefault Time सेट करता है<input type="time" value="10:30">


✅ Example with min, max, and step

<form>
    <label for="batchTime">Batch Time चुनें:</label>
    <input type="time" id="batchTime" name="batchTime" min="09:00" max="18:00" step="900">
    <button type="submit">Submit</button>
</form>

👉 इस Example में User केवल सुबह 9:00 से शाम 6:00 तक का Time चुन पाएगा और हर 15 मिनट के Gap में Option मिलेगा।