Как добавить дни в текущей дате? используя скрипт и django

Question

У меня есть этот код в моем html

<div class="modal-body">
   {% for me in ako %}
   Date: <input type="hidden" value="{{me.enddate}}" name="date" id="date">{{me.enddate}}
         <input type="hidden" value="{{me.id}}" name="id" hidden><p>{{me.Email}}</p>
   {% endfor %}
   <select id="addDays">
       {% for perfume in s %}
       <option value="{{perfume.id}}" >{{perfume.product}}  -  {{perfume.adddate}} Days</option>
       {% endfor %}
   </select>
</div>

Пример, если пользователь выбрал аромат classi c , он добавит дни в {{me .enddate}}

7дней + 8 марта 2020 г. = 15 марта 2020 г.

просто так, но я не знаю, как это сделать в сценарии, пожалуйста, помогите мне, ребята

У меня нет кода в моем скрипте, потому что я не знаю, как это сделать, и не знаю, как отобразить результат в моем html, что Вот почему я задал вопрос здесь, заранее спасибо тем, кто сможет помочь мне с этой проблемой

<script>
    ??????
</script>

ОБНОВЛЕНИЕ , когда я попробовал ответить mr@JairReina первый выбранный работает нормально, но когда я пытаюсь выбрать другой вариант, он не работает

<div id="output" class="output"></div>

<script>
   var date = new Date($('#date').val());
   var addDays = $(".modal-body select option:selected").data('days');
   date.setDate(date.getDate() + parseInt(addDays))

   var dateTimeFormat = new Intl.DateTimeFormat('en-us', { year: 'numeric', month: 'long', day: 'numeric' });
   var futureDate = dateTimeFormat.format(date);
   $('.output').text(futureDate)
</script>

так же, как это, но мой выбор

http://jsfiddle.net/MCzJ6/1

Answer 1

если я вас правильно понимаю, попробуйте этот код

  {% for me in ako %}
      Date: <input type="hidden" value="{{me.enddate}}" name="date" id="start_date">{{me.enddate}}
      <input type="hidden" value="{{me.id}}" name="id" hidden><p>{{me.Email}}</p>
   {% endfor %}
  <select id="days">
  {% for perfume in s %}
      <option value="{{perfume.id}}" data-days="{{perfume.adddate}}" id="days">{{perfume.product}}  -  {{perfume.adddate}} Days</option>
  {% endfor %}
  </select>


   <script>
       (function($, window, document, undefined){
             $("#days").on("change", function(){
             var date = new Date($("#start_date").val()),
              days = parseInt($("#days").val(), 10);
                  if(!isNaN(date.getTime())){
                         date.setDate(date.getDate() + days);
                         $("#end_date").val(date.toInputFormat());
                   } else {
                         alert("Invalid Date");
                   }
                    });

      Date.prototype.toInputFormat = function() {
      var yyyy = this.getFullYear().toString();
      var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
      var dd  = this.getDate().toString();
      return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]);
      };
      })(jQuery, this, document);
  </script>

Answer 2

Это то, что я бы сделал:

1. Я бы изменил первый скрытый ввод с помощью <input type="hidden" value="{{me.enddate}" name="date" id="date">, чтобы там было доступно значение даты.
2. Получите значение Значение me.enddate из скрытого ввода и создание объекта даты javascript. var date = new Date($('#date').val())
3. Добавьте количество дней, которое будет добавлено к каждому элементу опции. Для этого можно использовать атрибут данных, например: <option data-days="{{perfume.adddate}}"... >
4. Извлечь количество дней, добавляемых из выбранной опции: var addDays = $(".modal-body select option:selected").data('days')
5. Добавить количество дней к дате с помощью метода setDate: date.setDate(date.getDate() + addDays)
6. Получить строковое представление будущей даты, используя Intl.DateTimeFormat
7. Показать будущую дату в пользовательском интерфейсе.

Все вместе будет выглядеть так :

var date = new Date($('#date').val());
var addDays = $(".modal-body select option:selected").data('days');
date.setDate(date.getDate() + parseInt(addDays))
// get string representation of the future date using DateTimeFormat
var dateTimeFormat = new Intl.DateTimeFormat('en-us', { year: 'numeric', month: 'long', day: 'numeric' });
var futureDate = dateTimeFormat.format(date);
// here you should add the code to update the UI with the futureDate value

Я добавляю parseInt на всякий случай, если значение addDays отправляется в виде строки jQuery. Я проверил на Chrome, и это целое число, хотя. Вы можете протестировать в разных браузерах, чтобы узнать, нужно вам это или нет.

Спасибо,