Ejemplo de selector de fecha HTML

467 codex

Abrir en el editor Publica tu código

Recomendado

16 January 2025

formulario de suscripción al boletín informativo

10 March 2025

Un código de Shab._0

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>

Ejemplo de selector de fecha HTML

Recomendado

Un código de mematixd3162

formulario de suscripción al boletín informativo

Un código de Shab._0

HTML

CSS

JS

Recomendado

Un código de mematixd3162

formulario de suscripción al boletín informativo

Un código de Shab._0

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS