Sum of days on a date

Asked

Viewed 482 times

0

I’m finding it difficult to perform a calculation for a form.

I wish I could add days to a date selected by the user. I saw that there are several examples in the forum but with specified days (today for the date and the choice of days already with it provided).

However, what I would like is for it to be the user’s free choice. I need the date to be chosen in a calendar in Portuguese that I’ve done using datepicker.

I deactivated in the calendar the holidays and some days of the week (Fridays, Saturdays and Sundays). In the calculations I found I can’t fit the calendar for choice.

I have no experience in the field, I don’t know much about the code and I’m trying to learn by myself.

My project:

$(document).ready(function() {
  var dateMin = new Date();
  var weekDays = AddWeekDays(1);
  dateMin.setDate(dateMin.getDate() + weekDays);
  var natDays = [
    [1, 1, 'uk'],
    [4, 21, 'uk'],
    [5, 1, 'uk'],
    [9, 7, 'uk'],
    [9, 20, 'uk'],
    [10, 12, 'uk'],
    [11, 2, 'uk'],
    [15, 11, 'uk'],
    [12, 25, 'uk'],

    [2, 13, 'uk'],
    [3, 30, 'uk'],
    [4, 1, 'uk'],
    [5, 10, 'uk'],
    [5, 31, 'uk']
  ];

  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
      return nationalDays(date);
    } else {
      return noWeekend;
    }

  }

  function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }

    }
    return [true, ''];
  }

  function AddWeekDays(weekDaysToAdd) {
    var mydate = new Date();
    if (mydate.getHours() >= 10) var daysToAdd = 1;
    else var daysToAdd = 0;
    var day = mydate.getDay()
    weekDaysToAdd = weekDaysToAdd - (5 - day)
    if ((5 - day) < weekDaysToAdd || weekDaysToAdd == 1) {
      daysToAdd = (5 - day) + 2 + daysToAdd
    } else { // (5-day) >= weekDaysToAdd
      daysToAdd = (5 - day) + daysToAdd
    }
    while (weekDaysToAdd != 0) {
      var week = weekDaysToAdd - 5
      if (week > 0) {
        daysToAdd = 7 + daysToAdd
        weekDaysToAdd = weekDaysToAdd - 5
      } else { // week < 0
        daysToAdd = (5 + week) + daysToAdd
        weekDaysToAdd = weekDaysToAdd - (5 + week)
      }

    }
    return daysToAdd;
  }

  jQuery('#datepicker').datepicker({
    minDate: dateMin,
    minDate: 30,
    defaultDate: +1,
    firstDay: 0,
    changeFirstDay: true,
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd/mm/yy",
    dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado', 'Domingo'],
    dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    constrainInput: true,
    beforeShowDay: function(day) {
      if (day.getDay() < 1 || day.getDay() > 4) {
        return [false, ""];
      }
      return noWeekendsOrHolidays(day);
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Beggining: <input type="text" id="datepicker" size="10" maxlength="10"><br><br> Days: <input type="text" id="days" size="2" maxlength="2"><br><br> End: <input type="text" id="return" size="10" maxlength="10" disabled><br><br>

javascript jquery html

  • Ask the question the code snippet referring to the sum of days and indicate which problem you are having

1 answer

2


I believe that’s what you need:

  // Quando houver uma alteração no valor do input days
  jQuery('#days').change(function() {
    // Se o valor do input datepicker estiver vazio, não faz nada
    if(jQuery("#datepicker").val() == "" ) return;
    // Pego a data do input datepicker
    var date = $("#datepicker").datepicker("getDate");
    // Adiciono o valor de dias digitado no input days
    date.setDate(date.getDate() + Number(this.value));
    // Seto a data no input return
    $("#return").datepicker("setDate", date);
  });
  jQuery('#return').datepicker({
    dateFormat: "dd/mm/yy",
  });

See working:

$(document).ready(function() {
  var dateMin = new Date();
  var weekDays = AddWeekDays(1);
  dateMin.setDate(dateMin.getDate() + weekDays);
  var natDays = [
    [1, 1, 'uk'],
    [4, 21, 'uk'],
    [5, 1, 'uk'],
    [9, 7, 'uk'],
    [9, 20, 'uk'],
    [10, 12, 'uk'],
    [11, 2, 'uk'],
    [15, 11, 'uk'],
    [12, 25, 'uk'],

    [2, 13, 'uk'],
    [3, 30, 'uk'],
    [4, 1, 'uk'],
    [5, 10, 'uk'],
    [5, 31, 'uk']
  ];

  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
      return nationalDays(date);
    } else {
      return noWeekend;
    }

  }

  function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }

    }
    return [true, ''];
  }

  function AddWeekDays(weekDaysToAdd) {
    var mydate = new Date();
    if (mydate.getHours() >= 10) var daysToAdd = 1;
    else var daysToAdd = 0;
    var day = mydate.getDay()
    weekDaysToAdd = weekDaysToAdd - (5 - day)
    if ((5 - day) < weekDaysToAdd || weekDaysToAdd == 1) {
      daysToAdd = (5 - day) + 2 + daysToAdd
    } else { // (5-day) >= weekDaysToAdd
      daysToAdd = (5 - day) + daysToAdd
    }
    while (weekDaysToAdd != 0) {
      var week = weekDaysToAdd - 5
      if (week > 0) {
        daysToAdd = 7 + daysToAdd
        weekDaysToAdd = weekDaysToAdd - 5
      } else { // week < 0
        daysToAdd = (5 + week) + daysToAdd
        weekDaysToAdd = weekDaysToAdd - (5 + week)
      }

    }
    return daysToAdd;
  }

  jQuery('#datepicker').datepicker({
    minDate: dateMin,
    minDate: 30,
    defaultDate: +1,
    firstDay: 0,
    changeFirstDay: true,
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd/mm/yy",
    dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado', 'Domingo'],
    dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    constrainInput: true,
    beforeShowDay: function(day) {
      if (day.getDay() < 1 || day.getDay() > 4) {
        return [false, ""];
      }
      return noWeekendsOrHolidays(day);
    }
  });
  // Quando houver uma alteração no valor do input days
  jQuery('#days').change(function() {
    // Se o valor do input datepicker estiver vazio, não faz nada
    if(jQuery("#datepicker").val() == "" ) return;
    // Pego a data do input datepicker
    var date = $("#datepicker").datepicker("getDate");
    // Adiciono o valor de dias digitado no input days
    date.setDate(date.getDate() + Number(this.value));
    // Seto a data no input return
    $("#return").datepicker("setDate", date);
  });
  jQuery('#return').datepicker({
    dateFormat: "dd/mm/yy",
  }); 
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Beggining: <input type="text" id="datepicker" size="10" maxlength="10"><br><br> Days: <input type="text" id="days" size="2" maxlength="2"><br><br> End: <input type="text" id="return" size="10" maxlength="10" disabled><br><br>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.