Date selector - built in values

đź’¬ App Building
1

Hey,
I have this date component:

image
image1054Ă—612 30.3 KB

and I was wondering if there's an option to add some default values (like "Last 30 Days", "This year" and so on)
I already have the default dates selected as last 7 days, but the team wants to have more options. something like this:

image
image1274Ă—596 58.5 KB

Is this possible?

2

Hello @Yael_Cohen,

Retool’s Date Range component doesn’t directly support custom preset ranges (like “Last 7 Days” or “This Month”), but there’s a simple workaround you can use.

You can add a Select component with predefined options (like "Today", "Last 7 Days", "Custom Range", etc.). Then, using a JavaScript query or transformer, you can pass the selected value to control the actual date range.

If the user selects "Custom Range", you can show the Date Range component so they can manually pick the dates. This approach gives you more flexibility and a smoother experience.

Example Query:

const endOfToday = moment().endOf('day');

return [
  {
    label: 'Today',
    value: {
      startDate: today.format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Yesterday',
    value: {
      startDate: moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'),
      endDate: moment().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
    }
  },
  {
    label: 'Last 7 Days',
    value: {
      startDate: moment().subtract(6, 'days').startOf('day').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Last 15 Days',
    value: {
      startDate: moment().subtract(14, 'days').startOf('day').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Last 30 Days',
    value: {
      startDate: moment().subtract(29, 'days').startOf('day').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Custom Range',
    value: {
      startDate: null,
      endDate: null
    }
  }
];

Here is a Screenshots For your reference

Widle
Widle353Ă—322 9.42 KB

Widle
Widle414Ă—118 4.54 KB

Widle
Widle1069Ă—437 35.9 KB

5 Likes
3

thank you very much!

Is there a way to do "this month" or "this year"?

4

Yes you can do that and here is the updated example query and screenshot

const today = moment().startOf('day');
const endOfToday = moment().endOf('day');

return [
  {
    label: 'Today',
    value: {
      startDate: today.format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Yesterday',
    value: {
      startDate: moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'),
      endDate: moment().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
    }
  },
  {
    label: 'Last 7 Days',
    value: {
      startDate: moment().subtract(6, 'days').startOf('day').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Last 15 Days',
    value: {
      startDate: moment().subtract(14, 'days').startOf('day').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Last 30 Days',
    value: {
      startDate: moment().subtract(29, 'days').startOf('day').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'This Month',
    value: {
      startDate: moment().startOf('month').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'This Year',
    value: {
      startDate: moment().startOf('year').format('YYYY-MM-DD'),
      endDate: endOfToday.format('YYYY-MM-DD')
    }
  },
  {
    label: 'Custom Range',
    value: {
      startDate: null,
      endDate: null
    }
  }
];

Widle
Widle1011Ă—284 22.6 KB

6 Likes