How to implement a 'human' date range selection drop down list using HTML/JS? (Today, Yesterday, Last Week...)

Question

So, what I'm trying to do is implement a data range selection that doesn't show two date pickers 'from' and 'to'. I want to let the user choose between today, yesterday, last week, last month, etc.

I have something like this in our application on the server-side but: 1- the code looks terrible; 2- I want the API to receive the 'From' and 'To' dates, I just want the user to see a friendly date range selection.

Additional info: My front-end is based on AngularJS.

I want it to look something like this:

The actual code on the server-side is this mess:

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

I ended up using the MomentJS library (http://momentjs.com) and created a new module on my AngularJS application.

I uploaded it to GitHub for future visitors: https://github.com/renatocarrico/js-libraries/blob/master/human-date-range.js

Code (if link fails to open):

    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();
    }
}