HTML दिनांक चयनकर्ता उदाहरण

106 codex

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

26 October 2024

HTML CSS डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

19 March 2025

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

3 July 2025

फिटनेस जिम वेबसाइट HTML CSS टेम्पलेट

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Date Picker Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h1 {
            color: #333;
            margin-bottom: 25px;
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-size: 1.1em;
            color: #555;
        }
        input[type="date"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1em;
            width: 200px; /* Adjust as needed */
            box-sizing: border-box;
            -webkit-appearance: none; /* Remove default browser styling for some inputs */
            -moz-appearance: none;
            appearance: none;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Select a Date</h1>
        <form action="#" method="get">
            <label for="eventDate">Choose a date:</label>
            <input type="date" id="eventDate" name="eventDate" value="2023-10-26">
            
        </form>
        <p style="margin-top: 20px; font-size: 0.9em; color: #777;">
            This is a native HTML5 date picker. Its appearance may vary across browsers.
        </p>
    </div>
</body>
</html>

अनुशंसित

HTML CSS डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

फिटनेस जिम वेबसाइट HTML CSS टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS