Esempio di selettore data HTML

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 December 2024

Una directory alternativa della home page

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>

Esempio di selettore data HTML

Consigliato

Un codice di staticbug455

Un codice di cleanscript406

Una directory alternativa della home page

HTML

CSS

JS

Consigliato

Un codice di staticbug455

Un codice di cleanscript406

Una directory alternativa della home page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS