Question

如何使用datepicker自动计算用户选择日期的天数，并使用当前日期减去。

假设我已经使用datepicker选择了我的约会，并自动计算从我选择的日期到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>

Answer 1

对于jQuery UI datepicker，您可以使用onSelect回调函数来获取日期更改的句柄并使用以下内容进行计算。

$('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>

自动计算服务长度

1 个答案: