Date

by Marcos vini

HTML

<div class='box'>
<label>Data inicio:<input type="date" id="date"></label>
<label>Data final:<input type="date" id="date_f"></label>
<label>Dia:<input type="number" id="days" value="45" min="1" max="365" disabled></label>
<label>Calcular por dias: <input type="checkbox" id="options"></label>
<input type="button" id='gerar' value="Somar Data">   
<div id="resultado"></div>
</div>

CSS

::focus{
  outline:none;
}
.box {
   display: grid;
   grid-gap: 0.5rem;
    padding: 2rem;
    width: 15rem;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    max-width:450px;
}
input[type='number']:focus,input[type='date']:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #19b9e7 #17b0dc !important;
    outline: none;
    -webkit-transition: linear 0.5s;
    transition: linear 0.5s;
    -moz-transition: linear 0.5s;
    -ms-transition: linear 0.5s;
    -o-transition: linear 0.5s;
}
input[type='number'],input[type='date']{
      position: relative;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    border-radius: 0px !important;
    color: #999 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #afabab;
}
input[type='button']{
      float: left;
      display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action:...

JavaScript

var resultado = document.getElementById('resultado');
var btn_submit = document.getElementById('gerar');
var date = document.getElementById('date');
var date_f = document.getElementById('date_f');
var days = document.getElementById('days');
var Checkbox = document.getElementById('options');

const today = new Date();
const formattedToday = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
date.value = formattedToday;

const DATE = {
    validate: function() {
        const date_v = date.value;
        const date_f_v = date_f.value;
        const days_v = days.value;

        if (!Checkbox.checked && (isNaN(Date.parse(date_v)) || isNaN(Date.parse(date_f_v)))) {
            alert("Data inválida!");
            return false;
        }

        if (Checkbox.checked && (isNaN(days_v) || days_v <= 0)) {
            alert("Número de dias inválido!");
            return false;
        }

        this.sum();
    },
    sum: function() {
        const date_v = date.value;

        if (Checkbox.checked) {
            const startDate = new Date(date_v);
            const endDate = new Date(startDate.getTime() + days.value * 24 * 60 * 60 * 1000);
            endDate.setMinutes(endDate.getMinutes() + endDate.getTimezoneOffset());
            resultado.innerText = this.format(endDate);
        } else {
            const startDate = new Date(date_v);
            const endDate = new Date(date_f.value);
            
            if (endDate < startDate) {
                alert("Data final não pode ser antes da data inicial!");
                return;
            }
    
            const diffTime = Math.abs(endDate - startDate);
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
            resultado.innerText = `Diferença em dias: ${diffDays} dias`;
        }
    },
    generate: function() {
        this.validate();
        resultado.style.display = 'block';
    },
    format:...