how to use persian datepicker add function?

Question

in my laravel project, i use persian datepicker and have a problem with add function.

new persianDate().add(String, Number);

My problem is that in this function, the return date is calculated from today's date, while I want to define the initial date myself. For example, I have a start date and a deadline, and I want to calculate the completion date. I am waiting for guidance.

 <script>
$('#deadline').change(function() {
var dval =parseInt($('#deadline').val());
var startdate=document.getElementById("startdate").value;
                                                  
var inputF = document.getElementById("enddate"); 
edate=new persianDate().format();

edate=new persianDate().add('days', dval).format('YYYY/MM/DD');

inputF.value = edate; 
 });
</script>

Answer 1

Note: This will NOT work here due to the missing library however this should work.

• You appear to be using jQuery for the change event handler so I added that just to match yours.
• Since this is the deadline element inside the function we can just use the this.value for that.
• You then get the startdate element value however I wrapped it in the new Date()
• You can use const instead of var to be more modern in your code.

$('#deadline').on('change', function(event) {
  const dval = parseInt(this.value);
  const startval = document.getElementById("startdate").value;
  if (startval !== '') {
    $('.messages').text(`Start Date is ${startval} with type ${typeof startval}`);
    const startDate = new Date(startval);
    const startDateMS = startDate.getTime()
    console.log(startDateMS, typeof startDateMS);
    const inputF = document.getElementById("enddate");
    const edate = new persianDate(startDateMS).add('days', dval).format('YYYY/MM/DD');
    inputF.value = edate;
  } else {
    $('.messages').text("Start Date is not a date");
  }
});

body {
  display: grid;
  place-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Start Date:</label>
<input id="startdate" type="date" lang="fa" />
<label>Deadline days:</label>
<input id="deadline" type="number" lang="fa" />
<label>End Date:</label>
<input id="enddate" type="date" />
<div class="messages"></div>