javascript – 如何使用HTML / JS实现“人类”日期范围选择下拉列表？ (今天,昨天,上周…)

大佬教程收集整理的这篇文章主要介绍了javascript – 如何使用HTML / JS实现“人类”日期范围选择下拉列表？ (今天,昨天,上周…)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

所以,我要做的是实现一个数据范围选择,它不会从’和’到’显示两个日期选择器.我想让用户在今天,昨天,上周,上个月等之间做出选择.

我在服务器端的应用程序中有这样的东西但是：1-代码看起来很糟糕; 2-我希望API接收“发件人”和“收件人”日期,我只希望用户看到友好的日期范围选择.

附加信息：我的前端基于AngularJs.

我希望它看起来像这样：

服务器端的实际代码是这个烂摊子：

var today = datetiR_442_11845@e.Now.Date;

if (dateRange == (int)DateRange.Custom)
{
    var start = datetiR_442_11845@e.ParseExact(dateFrom, "dd/MM/yyyy", null);
    var end = datetiR_442_11845@e.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 = datetiR_442_11845@e.Now.StartOfWeek(DayOfWeek.Sunday);
    query = query.Where(ss => ss.DateRecevied >= dt);
    return query;
}

if (dateRange == (int)DateRange.ThisWeekFromMonToday)
{
    var dt = datetiR_442_11845@e.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 datetiR_442_11845@e(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 datetiR_442_11845@e(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 = datetiR_442_11845@eExtensions.GetDateForLastWeekMonday(today);
    var dateLastWeekSun = datetiR_442_11845@eExtensions.GetDateForLastWeekSun(today).AddDays(1);
    query = query
        .Where(ss =>
            ss.DateRecevied >= dateLastWeekMonday
            &&
            ss.DateRecevied < dateLastWeekSun);
    return query;
}

if (dateRange == (int)DateRange.LastWorkingWeekFromMonFri)
{
    var dateLastWeekMonday = datetiR_442_11845@eExtensions.GetDateForLastWeekMonday(today);
    var dateLastWeekFri = datetiR_442_11845@eExtensions.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();
    }
}

大佬总结

以上是大佬教程为你收集整理的javascript – 如何使用HTML / JS实现“人类”日期范围选择下拉列表？ (今天,昨天,上周…)全部内容，希望文章能够帮你解决javascript – 如何使用HTML / JS实现“人类”日期范围选择下拉列表？ (今天,昨天,上周…)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。