Calculate length of service automatically

Question

How to make an automatically calculate of how many day from what user pick a date using datepicker and minus with the current date.

Let's say i have choosen my date using datepicker and automatically calculate for me how many days from date what i pick until todayDateTime = Now()

<style>
    table,tr ,td {border:solid black 1px;}
</style>
<table>
    <!--- Title--->
    <tr>
        <th colspan="2">Duration</th>
    </tr>       
    <tr>
        <th>From</th>
        <th>To</th>
    </tr>
    <!--- Popup calendar Duration From --->
    <tr><td><center>
    <input class="center" type="text" name="Dur_from" size="8"b required="yes">
    <a href="javascript:showCal('Calendar1')"><img align="right" src="calendar_menu.gif"  alt="Select a date" border="0"></a>   
    </center></td>
    <!--- Popup calendar Duration From end --->

    <!--- Popup calendar Duration To --->
    <td><center>
    <input class="center" type="text" name="Dur_to" size="8" required="yes">
    <a href="javascript:showCal('Calendar2')"><img align="right" src="calendar_menu.gif"  alt="Select a date" border="0"></a>
    </center>   
    </td>
    <!--- Popup calendar Duration To end --->
    </tr>
</table>

in coldfusion you can use DateDiff - https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-functions/functions-c-d/DateDiff.html — luke, Mar 13 '18 at 10:33
Wow `` tags. You may need a more modern approach. Also there is no form on this. Is this supposed to be ColdFusion or JavaScript processing? — James A Mohler, Mar 14 '18 at 07:43
@JamesAMohler yeah bro why? This can be both Coldfusion or Javascript — Kijiya, Mar 14 '18 at 08:38

score 0 · Accepted Answer · answered Mar 14 '18 at 08:07

For jQuery UI datepicker, you can use onSelect callback function to get the handle the date changes and calculate using the following.

$('input[name="Dur_from"], input[name="Dur_to"]').datepicker({
  onSelect: function(dateText, inst) {
    var other, fromDate, toDate
    var fromDate = $('input[name="Dur_from"]').datepicker('getDate');
    var toDate = $('input[name="Dur_to"]').datepicker('getDate');
    if(isValidDate(toDate) && isValidDate(fromDate)){
      // Take the difference between the dates and divide by milliseconds per day.
      // Round to nearest whole number to deal with DST.
      $('#lengthOfService').text(Math.round((Date.parse(toDate)-Date.parse(fromDate))/(1000*60*60*24)));
    }
  }
});
function showCal(cal) { //added the value as ID
  //$('#' + cal).datepicker('show');
}
function isValidDate(str) {
  return !isNaN(Date.parse(str));
}

table,
tr,
td {
  border: solid black 1px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table>
  <tr>
    <th colspan="2">Duration</th>
  </tr>
  <tr>
    <th>From</th>
    <th>To</th>
  </tr>
  <tr>
    <td>
      <center>
        <input class="center" type="text" name="Dur_from" size="8" b required="yes">
        <a href="javascript:showCal('Calendar1')"><img align="right" src="https://cdn2.iconfinder.com/data/icons/snipicons/5000/calendar-16.png" alt="Select a date" border="0"></a>
      </center>
    </td>
    <td>
      <center>
        <input class="center" type="text" name="Dur_to" size="8" required="yes">
        <a href="javascript:showCal('Calendar2')"><img align="right" src="https://cdn2.iconfinder.com/data/icons/snipicons/5000/calendar-16.png" alt="Select a date" border="0"></a>
      </center>
    </td>
  </tr>
  <tr>
    <td>Length of service:</td>
    <td id="lengthOfService"></td>
  </tr>
</table>

this is what i want, thank you very much bro. and thanks again for giving an answer. TQ — Kijiya, Mar 14 '18 at 08:35

Calculate length of service automatically

1 Answers1