javascript - 如何使用 HTML/JS 实现 'human' 日期范围选择下拉列表？ (今天、昨天、上周……)

Question

所以，我想做的是实现一个数据范围选择，它不显示两个日期选择器“从”和“到”。我想让用户在今天、昨天、上周、上个月等之间进行选择。

我在服务器端的应用程序中有类似的东西，但是: 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;

Answer 1

我最终使用了 MomentJS 库 ( http://momentjs.com ) 并在我的 AngularJS 应用程序上创建了一个新模块。

我将它上传到 GitHub 以供 future 的访问者使用: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();
    }
}