CODEWITHSUNDEEP
javascriptjquerydjango
user12966778
user12966778

Reputation:

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

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

enter image description here

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

Upvotes: 2

Views: 536

Answers (2)

user12951147
user12951147

Reputation:

if I understand you clearly, try this code

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

Upvotes: 2

Jair Reina
Jair Reina

Reputation: 2915

This is what I would do:

  1. I'd change the first hidden input with <input type="hidden" value="{{me.enddate}" name="date" id="date">, to have the date value available there.
  2. Grab the value of me.enddate value from the hidden input and create a javascript date object. var date = new Date($('#date').val())
  3. Add the number of days to be added to each option element. You can use a data attribute for this, like: <option data-days="{{perfume.adddate}}"... >
  4. Grab the number of days to add from the selected option: var addDays = $(".modal-body select option:selected").data('days')
  5. Add days to date using the setDate method: date.setDate(date.getDate() + addDays)
  6. Get a string representation of the future date using Intl.DateTimeFormat
  7. Display the future date in the UI.

All together would look like this:

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

I'm adding a parseInt just in case the addDays value is sent as a string by jQuery. I tested on Chrome and it comes as an integer, though. You can test in different browsers to see if you need it or not.

Thanks,

Upvotes: 2

Related Questions