所以,我想做的是实现一个数据范围选择,该选择不显示两个日期选择器“from”和“to”。我想让用户在今天,昨天,上周,上个月等之间进行选择。
我在服务器端的应用程序中有类似的内容,但是:1-代码看起来很糟糕; 2-我希望API接收“开始”和“结束”日期,我只希望用户看到一个友好的日期范围选择。
附加信息:我的前端基于AngularJS。
我希望它看起来像这样:
服务器端的实际代码是这样的:
var today = DateTime.Now.Date;
if (dateRange == (int)DateRange.Custom)
{
var start = DateTime.ParseExact(dateFrom, "dd/MM/yyyy", null);
var end = DateTime.ParseExact(dateTo, "dd/MM/yyyy", null).AddDays(1);
query = query.Where(ss => ss.DateRecevied >= start && ss.DateRecevied < end);
return query;
}
if (dateRange == (int)DateRange.Today)
{
query = query.Where(ss => ss.DateRecevied >= today);
return query;
}
if (dateRange == (int)DateRange.Yesterday)
{
var dateShift = today.AddDays(-1);
query = query.Where(ss => ss.DateRecevied >= dateShift && ss.DateRecevied < today);
return query;
}
if (dateRange == (int)DateRange.ThisWeekFromSunToday)
{
var dt = DateTime.Now.StartOfWeek(DayOfWeek.Sunday);
query = query.Where(ss => ss.DateRecevied >= dt);
return query;
}
if (dateRange == (int)DateRange.ThisWeekFromMonToday)
{
var dt = DateTime.Now.StartOfWeek(DayOfWeek.Monday);
query = query.Where(ss => ss.DateRecevied >= dt);
return query;
}
if (dateRange == (int)DateRange.Last7Days)
{
var dateShift = today.AddDays(-7);
query = query.Where(ss => ss.DateRecevied >= dateShift);
return query;
}
if (dateRange == (int)DateRange.Last14days)
{
var dateShift = today.AddDays(-14);
query = query.Where(ss => ss.DateRecevied >= dateShift);
return query;
}
if (dateRange == (int)DateRange.ThisMonth)
{
var dateShift = new DateTime(today.Year, today.Month, 1);
query = query.Where(ss => ss.DateRecevied >= dateShift);
return query;
}
if (dateRange == (int)DateRange.Last30days)
{
var dateShift = today.AddDays(-30);
query = query.Where(ss => ss.DateRecevied >= dateShift);
return query;
}
if (dateRange == (int)DateRange.LastMonth)
{
var dateShift = new DateTime(today.Year, today.Month, 1);
var dateShift2 = dateShift.AddMonths(-1);
query = query.Where(ss => ss.DateRecevied >= dateShift2 && ss.DateRecevied < dateShift);
return query;
}
if (dateRange == (int)DateRange.AllTime)
{
query = query.AsQueryable();
return query;
}
if (dateRange == (int)DateRange.Last90Days)
{
var dateShift = today.AddDays(-90);
query = query.Where(ss => ss.DateRecevied >= dateShift);
return query;
}
if (dateRange == (int)DateRange.LastWeekFromMonSun)
{
var dateLastWeekMonday = DateTimeExtensions.GetDateForLastWeekMonday(today);
var dateLastWeekSun = DateTimeExtensions.GetDateForLastWeekSun(today).AddDays(1);
query = query
.Where(ss =>
ss.DateRecevied >= dateLastWeekMonday
&&
ss.DateRecevied < dateLastWeekSun);
return query;
}
if (dateRange == (int)DateRange.LastWorkingWeekFromMonFri)
{
var dateLastWeekMonday = DateTimeExtensions.GetDateForLastWeekMonday(today);
var dateLastWeekFri = DateTimeExtensions.GetDateForLastWeekFri(today).AddDays(1);
query = query
.Where(ss =>
ss.DateRecevied >= dateLastWeekMonday
&&
ss.DateRecevied < dateLastWeekFri);
return query;
}
return query;
最佳答案
我最终使用了MomentJS库(http://momentjs.com),并在AngularJS应用程序上创建了一个新模块。
我将其上传到GitHub以供将来的访问者使用:https://github.com/renatocarrico/js-libraries/blob/master/human-date-range.js
代码(如果链接无法打开):
var options = [{ name: "Custom", id: 1 }, { name: "Today", id: 2 }, { name: "Yesterday", id: 3 }, { name: "This Week (Sun - Today)", id: 4 }, { name: "This Week (Mon - Today)", id: 5 }, { name: "Last 7 Days", id: 6 }, { name: "Last Week (Mon - Sunday)", id: 7 }, { name: "Last Business Week (Mon - Fri)", id: 8 }, { name: "Last 14 days", id: 9 }, { name: "This Month", id: 10 }, { name: "Last 30 Days", id: 11 }, { name: "Last Month", id: 12 }, { name: "Last 90 Days", id: 13 }];
var selectedOption = 2;
function setSelectedOption (optionId) {
selectedOption = optionId;
};
function getOptions() {
return options;
};
function getFromDate() {
//Today
if (selectedOption == 2) {
return new Date();
}
//Yesterday
if (selectedOption == 3) {
return moment().subtract(1, 'd').toDate();
}
//This Week (Sun - Today)
if (selectedOption == 4) {
return moment().day("Sunday").toDate();
}
//This Week (Mon - Today)
if (selectedOption == 5) {
return moment().day("Monday").toDate();
}
//Last 7 Days
if (selectedOption == 6) {
return moment().subtract(7, 'd').toDate();
}
//Last Week (Mon - Sunday)
if (selectedOption == 7) {
return moment().day('Monday').subtract(1, 'w').toDate();
}
//Last Business Week (Mon - Fri)
if (selectedOption == 8) {
return moment().day('Monday').subtract(1,'w').toDate();
}
//Last 14 days
if (selectedOption == 9) {
return moment().subtract(14, 'd').toDate();
}
//This Month
if (selectedOption == 10) {
return moment().startOf('month').toDate();
}
//Last 30 Days
if (selectedOption == 11) {
return moment().subtract(30, 'd').toDate();
}
//Last Month
if (selectedOption == 12) {
return moment().startOf('month').subtract(1,'M').toDate()
}
//Last 90 Days
if (selectedOption == 13) {
return moment().subtract(90, 'd').toDate();
}
}
function getToDate() {
//Today
if (selectedOption == 2) {
return new Date();
}
//Yesterday
if (selectedOption == 3) {
return moment().subtract(1, 'd').toDate();
}
//This Week (Sun - Today)
if (selectedOption == 4) {
return new Date();
}
//This Week (Mon - Today)
if (selectedOption == 5) {
return new Date();
}
//Last 7 Days
if (selectedOption == 6) {
return new Date();
}
//Last Week (Mon - Sunday)
if (selectedOption == 7) {
return moment().day(0).toDate();
}
//Last Business Week (Mon - Fri)
if (selectedOption == 8) {
return moment().day(-2).toDate();
}
//Last 14 days
if (selectedOption == 9) {
return new Date();
}
//This Month
if (selectedOption == 10) {
return moment().endOf('month').toDate();
}
//Last 30 Days
if (selectedOption == 11) {
return new Date();
}
//Last Month
if (selectedOption == 12) {
return moment().subtract(1, 'M').endOf('month').toDate();
}
//Last 90 Days
if (selectedOption == 13) {
return new Date();
}
}