要显示数据的最后一周和任何两个日期之间的数据，我正在努力
To do display the last week of data and the data between any two dates I am struggling
我尝试了moment.js并尝试使用jquery daypicker。但到目前为止，还没有什么真正奏效。我想当我尝试使用这些方法时，我遗漏了一些东西，或者我用错了。
正如你在下面看到的我的代码，我可以让"显示上个月的最后一个"一个基本的香草javascript。但我想让这个更好。我花了差不多一个星期的时间在这上面。我想是时候寻求帮助了。
在我的js文件中: 'use strict';
require('./create-data-table.scss');
const angular = require('angular');
// const moment = require('moment');
const sampleApp = angular.module('sampleApp');
sampleApp.component('createDataTable',{
template: require('./create-data-table.html'),
controller: 'CreateTableController',
controllerAs:'createTableCtrl'
});
sampleApp.factory('listsFactory', function($q,$http){
return {
getLists: function(){
return $http.get('https://gist.githubusercontent.com/evanjacobs/c150c0375030dc4de65e9b95784dc894/raw/35c5f455b147703db3989df0cb90f5781c3b312f/usage_data.json');
}
};
});
sampleApp.controller('CreateTableController', ['$scope', '$http','listsFactory', CreateTableController]);
function CreateTableController($scope,$http, listsFactory){
// $scope.date ={ year:null, month:null};
listsFactory.getLists().then(function(response){
$scope.lists = response.data;
console.log($scope.lists);
}, function(error){
console.error(error);
});
$scope.reverse = function() {
$scope.lists.reverse();
};
$scope.sortingByMonthFilter = function(year, month) {
console.log('filtering');
$scope.unfilteredLists = $scope.unfilteredLists || $scope.lists;
$scope.lists = $scope.unfilteredLists.filter((record) => {
return record.date.includes(`${year}-${month}`);
});
};
$scope.getLastWeek = function() {
$scope.unfilteredLists = $scope.lists;
$scope.lists = $scope.lists.filter((record) => {
var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth();
var currentDay = today.getDate();
var recordDate = new Date(record.date);
var recordYear = recordDate.getFullYear();
var recordMonth = recordDate.getMonth();
var recordDay = recordDate.getDate();
var lastWeekDays = [];
var firstDayOfLastWeek = currentDay -7;
for(var i = currentDay; i >= firstDayOfLastWeek; i--){
lastWeekDays.push(i);
}
var lastWD1 = lastWeekDays[0];
var lastWD2 = lastWeekDays[1];
var lastWD3 = lastWeekDays[2];
var lastWD4 = lastWeekDays[3];
var lastWD5 = lastWeekDays[4];
var lastWD6 = lastWeekDays[5];
var lastWD7 = lastWeekDays[6];
if (recordYear === currentYear && recordMonth === currentMonth){
console.log(recordYear,recordMonth, currentYear,currentMonth);
// if(recordDay.matches(lastWeekDays)){
// return record;
// }
if (recordDay=== lastWD1|| lastWD2||lastWD3||
lastWD4||lastWD5|| lastWD6||lastWD7){
console.log(record);
return record;
}
}
else {
console.log('No matching data!');
}
});
};
$scope.getLastMonth = function(){
$scope.unfilteredLists = $scope.lists;
$scope.lists = $scope.lists.filter((record) => {
var today = new Date();
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
var recordDate = new Date(record.date);
var recordYear = recordDate.getFullYear();
var recordMonth = recordDate.getMonth();
var lastMonth = currentMonth -1;
if (recordYear === currentYear){
if (recordMonth === lastMonth && lastMonth !== 0 ){
console.log(record);
return record;
}
if(recordMonth === lastMonth && lastMonth === 0 ){
recordYear = currentYear -1;
recordMonth = 11;
return record;
}
}
});
};
$scope.byTwoDates = function(){
$scope.unfilteredLists = $scope.lists;
$scope.lists = $scope.lists.filter((record) => {
// function daysBetween(startDate, endDate){
// var days = [], current = startDate;
// while(current <= endDate){
// days.push(current);
// }
// return days;
// }
var startD = document.getElementById('startDate').value;
var endD = document.getElementById('endDate').value;
console.log(startD,endD);
var currentDate = new Date(startD);
var d =[];
console.log(d);
});
};
$scope.sortType = 'name';
$scope.sortReverse = false;
$scope.searchData = '';
}
在我的html
<div class ="create-data-table">
<table>
<thead>
<section class="bylastMonth">
<button name="filter" ng-click="getLastMonth()">Last Month Data</button>
</section>
<section class="bylastWeek">
<button name="filter" ng-click="getLastWeek()">Last Week Data</button>
</section>
<section class="bytwoDays">
<!-- <input id="startDate"/>
<input id="endDate"/> -->
<label>Start Date</label><input id="startDate" type="date">
<label>End Date</label><input id="endDate" type="date">
<button name="filter" ng-click="byTwoDates()">Between Two days</button>
</section>
<tr>
<td>
<a href="#" ng-click="sortType = 'date'; sortReverse = !sortReverse">
Date
<span ng-show="sortType == 'date' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'date' && sortReverse" class="fa fa-caret-up"></span>
</a>
<section class="filteringByMonth">
<input name="year" type="text" placeholder ="Year" ng-model="date.year" >
<input name="month" type="text" placeholder="Month(MM)" ng-model="date.month" >
<button name="filter" ng-click="sortingByMonthFilter(date.year, date.month)">Filter</button>
</section>
</td>
<td>
<a href="#" ng-click="sortType = 'users'; sortReverse = !sortReverse">
Users
<span ng-show="sortType == 'users' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'users' && sortReverse" class="fa fa-caret-up"></span>
</a>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input type="text"
name ="users"
class="form-control" placeholder="search by Users #" ng-model="searchData">
</div>
</div>
</form>
</td>
<td>
<a href="#" ng-click="sortType = 'searches'; sortReverse = !sortReverse">
Searches
<span ng-show="sortType == 'searches' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'searches' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in lists | orderBy:sortType:sortReverse |
filter:searchData">
<td>{{ list.date }}</td>
<td>{{ list.users }}</td>
<td>{{ list.searches }}</td>
</tr>
</tbody>
</table>
救我!
我假设你正在使用http://angular-ui.github.io/bootstrap/和https://github.com/urish/angular-moment，那么你需要改变你的byTwoDates函数一点，使它像
$scope.byTwoDates = function(start, end) {
try {
return ((moment.duration(end - start)).humanize());
} catch (e) {
return "It's not valid to evaluate"
}
};
如果你想要getLastWeek，你可以使用以下方法:
本周:moment().startOf('isoWeek')
moment().endOf('isoWeek')
moment().subtract(1, 'weeks').startOf('isoWeek')
moment().subtract(1, 'weeks').endOf('isoWeek')
查看本文档:http://momentjs.com/docs/
为例
/*getLastWeekStart().format('DD/MM/YYYY') to get 10/09/2016 */
function getNextWeekStart() { // Just for demonestration if you want to work with next week you can leave this function.
var today = moment();
//edited part
var daystoMonday = 0 - (today.isoWeekday() - 1) + 7;
var nextMonday = today.subtract('days', daystoMonday);
return nextMonday;
}
function getLastWeekStart() {
var today = moment();
var daystoLastMonday = 0 - (1 - today.isoWeekday()) + 7;
var lastMonday = today.subtract('days', daystoLastMonday);
return lastMonday;
}
function getLastWeekEnd() {
var lastMonday = getLastWeekStart();
var lastSunday = lastMonday.add('days', 6);
return lastSunday;
}
//remember you may also use this
moment('anydate you want ').weekday(-7).format('DD/MM/YYYY')
请随意添加任何您想要的功能，并自定义它。
相关文章：
- 函数参数中的数据与指定变量之间的任何性能差异
- 在控制器和数据对象之间同步数据
- 使用服务(AngularJS）在控制器之间共享数据
- AngularJS中的页面之间共享数据返回空
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- Mongoose查询在两个日期时间之间提取数据
- 使用Angularjs在两个不同页面的控制器之间共享数据
- 使用JavaScript在网页之间进行数据传输
- 如何在网页之间存储数据
- 如何在Windows Phone 8.1应用程序中在C#和Javascript之间传递数据或通信
- JS和PHP复杂数据之间的桥梁
- Windows 8.1 应用中应用数据和会话数据之间的差异
- 在使用Ajax仅检索数据库中的数据之间，如何更好地从html结构中的数据库中检索数据
- Google Analytics、GoSquared和我自己的统计数据之间存在巨大的页面浏览量差异
- 显示数据之间的依赖关系(映射/矩阵）
- 如何减少客户端在socket.io中接收数据之间的时间差
- 流星JS铁路由器:共享公共'数据'之间的路线
- 共享数据之间的猫鼬中间件方法前保存和后保存
- D3.js:时间刻度和数据:刻度和数据之间的一些像素间隙
- 在ExtJS存储中使用后，会导致数据之间的差异
