如何使用Angular.js/Javascript计算日差

How to calculate day difference using Angular.js/Javascript

本文关键字：计算 Javascript 何使用 Angular js      更新时间：2023-09-26

我需要一个帮助。我需要使用Angular.js/Javascript计算两个天字段之间的差异。我在下面解释我的代码。

<select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>

我的第二天下拉列表如下:

<select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
    <option value="" label="Select Day" selected="selected">Select Day</option>
    <option value="1" label="Monday">Monday</option>
    <option value="2" label="Tuesday">Tuesday</option>
    <option value="3" label="Wednesday">Wednesday</option>
    <option value="4" label="Thursday">Thursday</option>
    <option value="5" label="Friday">Friday</option>
    <option value="6" label="Saturday">Saturday</option>
    <option value="7" label="Sunday">Sunday</option>
    </select>

这里我有两个下拉菜单，如day from and day to。我需要当用户将选择两天的差额应计算包括那些天。假设用户先选择Monday and wednesday，则计算为差值3。

如果您将第一个输入称为dayFrom，第二个输入称为dayTo，则:

function calculateDifference(dayFrom, dayTo) {
    return Math.abs(dayTo + dayFrom) + 1;
}
var difference = calculateDifference($scope.dayFrom, $scope.dayTo);

var difference=abs(parseInt($scope.daysTo)-parseInt($scope.daysFrom))+1;


$('#daysFrom, #daysTo').change(function(){    
    if ($('#daysTo').val() < $('#daysFrom').val())
    {
      console.log("Wrong day choose");
      return false;
    }
    console.log($('#daysTo').val() - $('#daysFrom').val()+1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
From : <select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
To : <select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
    <option value="" label="Select Day" selected="selected">Select Day</option>
    <option value="1" label="Monday">Monday</option>
    <option value="2" label="Tuesday">Tuesday</option>
    <option value="3" label="Wednesday">Wednesday</option>
    <option value="4" label="Thursday">Thursday</option>
    <option value="5" label="Friday">Friday</option>
    <option value="6" label="Saturday">Saturday</option>
    <option value="7" label="Sunday">Sunday</option>
    </select>

我没有看到任何角，所以我展示了如何在纯js中管理它:

(function(){
//private scope
 
//variables - DOM references
var output=document.querySelector("#output");
var from=document.querySelector("#daysFrom");
var to=document.querySelector("#daysTo");
//error codes
var ERROR_CHOOSE=-1;
var ERROR_DIFF=-2;
//calculates
function calcDiff(){
  
  if (to.value==="" || from.value==="")
  return ERROR_CHOOSE;
  
  if (to.value<from.value)
  return ERROR_DIFF;
  
  return to.value-from.value+1;
  
};
//return human results
function display(){
    var result=calcDiff();
    if (result>0){ //we know no error
      
        if (result==1)
        return result+=" day";
        else
            return result+=" days";
    }
    //here errors
    return result==ERROR_CHOOSE?"Choose both days":"Choose right days";
};
//usage example
from.addEventListener("change",function(){
  output.innerText=display();
  
});
to.addEventListener("change",function(){
  output.innerText=display();
  
});
 
})();
<select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
<select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
<div style="margin-top:10px">Current trip length:
<b id="output">Please choose days</b>
</div>

相关文章：