在下拉列表中使用javascript显示未来日期。 (每次动态)

时间:2015-12-11 00:18:28

标签: javascript jquery html angularjs date

我有jsfiddle http://jsfiddle.net/92yv2h9n/

如您所见,下拉列表的第一个选项显示当前日期。接下来的两个选项应显示未来的日期。

例如今天是11月12日。所以应该显示12月12日和13日的未来日期。目前仅显示当前日期。它采用mm-dd-yyyy格式。

有人可以强调如何实现未来的日期。

PS-它应该自动注意到feb有28天而dec有31天,依此类推。

这是代码。

JS代码

function Ctrl($scope) {
$scope.date = new Date();
}

HTML代码

<div ng-app ng-controller="Ctrl">
<select>
<option>{{date | date:'MM-dd-yyyy'}}</option>
<option>{{date | date:'MM-dd-yyyy'}}</option>
<option>{{date | date:'MM-dd-yyyy'}}</option>
</select>
</div>

1 个答案:

答案 0 :(得分:2)

将日期转换为毫秒,并在其上添加一天毫秒(或第二天为2天):

<div ng-app ng-controller="Ctrl">
  <select>
    <option>{{date.getTime() | date:'MM-dd-yyyy'}}</option>
    <option>{{(date.getTime() + (1000 * 60 * 60 * 24)) | date:'MM-dd-yyyy'}}</option>
    <option>{{(date.getTime() + (1000 * 60 * 60 * 48)) | date:'MM-dd-yyyy'}}</option>
  </select>
</div>

使用ng-repeat的更短版本:

<div ng-app ng-controller="Ctrl">
  <select>
    <option ng-repeat="date in [0,1,2]">{{date.getTime() + (1000 * 60 * 60 * 24 * day)| date:'MM-dd-yyyy'}}</option>
  </select>
</div>

避免周末:

<div ng-app ng-controller="Ctrl">
  <select>
    <option ng-repeat="day in dates">{{date | date:'MM-dd-yyyy'}}</option>
  </select>
</div>

控制器:

function Ctrl($scope) {
    $scope.baseAdd = 0;
  $scope.dates = [0,1,2].map(function(day) {
    dateobj = new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * (day + $scope.baseAdd)));
        while(dateobj.getDay() == 6 || dateobj.getDay() == 0) {
      dateobj = new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * (day + $scope.baseAdd++)));
    }
    console.log(dateobj)
    return dateobj;
});
}