Date Range Component Could be better

Feature Requests
1

The "Date Range" component could be improved. i.e. This thing could start as early as 1970 and the only way the year can be advanced (without code) is by scrolling through the calendar which could take hours.

The "Date" component has a feature whereby you can click on the Year and change it, which solves this problem.

So I have used a Start Calendar and an End Calendar which works fine but I think this should be added to the "To Do" list for our component developers.

I am including a screen capture of the Date component.

pict1
pict1523×640 42.1 KB

Mike

2

I agree. :wave:

3

I agree @mdsmith1 the range component lacks the ability to quickly change the year or month by large increments. And yet it otherwise looks almost identical to the date picker component.

I think for the purposes of standardising (and improving) the UI component library, the dev team should consider this.

4

Stewart:

I think a number of the components need a second look.

The button, text, text input, number input and others have no style options for font size. We have colors, borders and rounded corners but no control of font size.

I think someone should look at this.

Mike

5

Mike, don't get me started!

The properties available on components are so arbitrary and frustrating. I can't even change the font look on a link component, let alone use markdown with it.

Retool: you can change these things in CSS
Me: Why should I have to? I could do this with Delphi 20 years ago.

Cheers,

6

Hey @stewart.anstey, I feel you. :sweat_smile:

7

Thanks everyone for the feedback! I've shared this internally as well! Hopefully, we can ship font size controls (among some of our other styling updates):crossed_fingers: as well as a date range upgrade

1 Like
8

Thank you @Tess!

9

Any ETA on the date range changes ? Being able to scroll by month only makes the component pretty useless considering the alternative (2 date components)

10

Hi @yiga2 Unfortunately, no update yet :disappointed: I'll let the team know you checked in!

1 Like
11

It try to implement my own datepicker as custom-component but this will not working:

<style>
  @import url('https://rsms.me/inter/inter.css');
  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }

  * {
    font-family: 'Inter', sans-serif;
  }

  body {
    margin: 0;
  }

  #react {
    height: 100%;
    width: 100%;
  }
</style>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/moment@2.29.4/min/moment.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4.15.0/dist/antd.css"></script>
<script src="https://unpkg.com/antd@4.15.0/dist/antd.min.js"></script>

<div id="react"></div>

<script type="text/babel">
  console.log('foo', window.antd.DatePicker);

  
  const DatePicker = window['antd']['DatePicker'];
  const { RangePicker } = DatePicker;

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
     <RangePicker />
  )

  // This is the entrypoint for the React component.
  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
  const container = document.getElementById('react')
  const root = ReactDOM.createRoot(container)
  root.render(<ConnectedComponent />)
</script>

But this Code freezes the complete retool!
What i do wrong here?

This is the same code withoutout the retool context:

This work as expected!

12

i found the error by myself.
it was this css from the Example:

  #react {
    height: 100%;
    width: 100%;
  }

But my idea was nonsence because of the IFrame.
The Picker popup was trapped inside

13

There are still some open requests here, but we did ship font size in the Styles section

image
image956×1072 32.2 KB

14

I added the Date Range component to my app and since the use case is to select a date range between two months irrespective of day, I set the format to MM-yyyy, however this only affects how the text representation of the date is displayed, it does not affect the UI so the user is shown a calendar from which he selects a date. This is confusing as the use case expects a Month only
image

15

HI there @Zvi,

I feel the frustration, been there as well. I ended up using the default "month" component which is basically a select with the months already provided by default. It is not ideal but it is a good workaround....

1 Like
16

The date range picker should really be optimized. It looks weird on the mobile device, and you can't even select the year you want.

At least, if it can display just one calendar on the mobile device, it should be a quick win.

@Tess

17

Chuck:

I finally gave up on the Date Range component and ended up using 2 separate date pickers to get "datebeg" and "dateend".

I am including some screen shots:

This shows the first screen with no dates picked.

pict3
pict31883×847 129 KB

This shows the screen as the beginning date is picked. You can key into this if you want a year that was 4 years ago.

pict2
pict21877×862 145 KB

Here's what it looks like after selecting the 2 dates.

pict4
pict41886×845 132 KB

Mike