HTML Como faço um input de entrada e saida com data

joaovitorm102 · 12 de setembro de 2024

gostaria de fazer um input neste modelo vi em um hotel e não estou conseguindo replicar tenho um intuito de por so a data inicio e fim não precisa de preço apenas para data de preferência com um js simples ou ajaX

RESOLVIDO COM O flatpickr INCLUSIVE OS PREÇOS

Luis Gabriel Goes · 12 de setembro de 2024

@joaovitorm102 Para replicar um input de data de entrada e saída como o que você mostrou na imagem, você pode usar HTML, CSS e JavaScript de forma simples. Aqui está um exemplo básico com um calendário para selecionar a data de início e fim, sem incluir os preços.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendário de Entrada e Saída</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="calendar-container">
        <div class="input-fields">
            <label for="checkin">Data de Entrada:</label>
            <input type="date" id="checkin" name="checkin" min="">

            <label for="checkout">Data de Saída:</label>
            <input type="date" id="checkout" name="checkout" min="">
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.calendar-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    margin: 100px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.input-fields {
    display: flex;
    flex-direction: column;
}

label {
    margin: 10px 0 5px;
    font-size: 16px;
    color: #333;
}

input[type="date"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

input[type="date"]:focus {
    border-color: #007BFF;
    outline: none;
}

document.addEventListener('DOMContentLoaded', function () {
    // Definir data mínima como o dia de hoje
    let today = new Date().toISOString().split('T')[0];
    document.getElementById('checkin').setAttribute('min', today);
    document.getElementById('checkout').setAttribute('min', today);

    // Quando a data de check-in mudar, ajustar a data mínima do check-out
    document.getElementById('checkin').addEventListener('change', function () {
        let checkinDate = this.value;
        document.getElementById('checkout').setAttribute('min', checkinDate);
    });

    // Bloquear datas anteriores no calendário de entrada e saída
    document.getElementById('checkout').addEventListener('change', function () {
        let checkoutDate = this.value;
        document.getElementById('checkin').setAttribute('max', checkoutDate);
    });
});