javascript - How to add days in the current date? using script and django

Question

I have this code in my 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>

Example if the user selected the classic perfume it will add days in the {{me.enddate}}

7days + March 8, 2020 = March 15, 2020

just like that, but i dont know how to do it in script, please help me guys

i dont have code in my script cause i dont know how to do it and dont know how to display the result in my html, that is why i asked question here, thanks in advance to those who will able to help me with this problem

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

UPDATE when i tried the answer of mr@JairReina the first selected works fine but when i try to selecting another option, it did'nt work

<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>

just like this but mine is seletion

http://jsfiddle.net/MCzJ6/1

标签： javascriptjquerydjango

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>