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>

例如，如果用户选择了经典香水，它将在 {{me.enddate}}

中添加天数

7天+ 2020年3月8日= 2020年3月15日

就是这样，但是我不知道该怎么做，请帮帮我

我的脚本中没有代码，因为我不知道该怎么做，也不知道如何在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

这就是我要做的：

我将用<input type="hidden" value="{{me.enddate}" name="date" id="date">更改第一个隐藏的输入，以使日期值在那里可用。
从隐藏的输入中获取me.enddate值的值，并创建一个javascript日期对象。 var date = new Date($('#date').val())
添加要添加到每个选项元素的天数。您可以为此使用数据属性，例如：<option data-days="{{perfume.adddate}}"... >
从所选选项中增加要添加的天数：var addDays = $(".modal-body select option:selected").data('days')
使用setDate方法添加日期：date.setDate(date.getDate() + addDays)
使用Intl.DateTimeFormat获取未来日期的字符串表示形式
在用户界面中显示将来的日期。

全部看起来像这样：

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，以防jQuery将addDays值作为字符串发送。我在Chrome上进行了测试，但是它是一个整数。您可以在不同的浏览器中进行测试，以查看是否需要它。

谢谢

如何在当前日期添加天数？使用脚本和Django

2 个答案: