Calendar widget for date field filters

[brylie]

using: Docker version: 1.5.0

Context

When filtering columns with date data, the user is expected to input the filter string manually (e.g. > or <).

Feature request

When defining a filter for ES date fields, it would be helpful if the user could select date value(s) from a calendar widget.

[siddharthlatest]

This is a good point @brylie. We can show a calendar from / to widget to filter on the dates. I am adding this as an enhancement.

We will also add some pointers on how to implement this, so if someone is interested in seeing this sooner - they can pick it up.

[divyanshu013]

We're using react-datetime for editing date fields. It should be possible to extend this for use in the filters. This may require refactoring of existing components.

[divyanshu013]

Here's a more detailed explanation if someone wishes to take this up:

1. The DataTable component at table/DataTable.js passes the mappingObj to the Column component at table/Column.js.
2. The Column component filters out the datatype for the current column in the datatype variable.
3. The Column component renders a FilterDropdown component passing it the datatype.
4. The FilterDropdown component renders a component SingleMenuItem which picks the filter value from the dropdown directly via DOM.
5. It would probably be best to create a new component and use it instead of SingleMenuItem since it's hard to refactor. Also reading values from the DOM is not a good idea especially here.
6. One thing to keep in mind is to make the logic work for all formats. I'm handling this in the Cell component at table/Cell.js in the handleDatetimeChange method.
7. Check the usage of DateTime component in Cell since a similar approach can be utilized for selecting dates via the filter dropdown.

<Datetime
	defaultValue={moment(this.state.data, getMomentDate(this.props.datatype.format))}
	dateFormat={
		this.props.datatype.format === 'basic_time' || this.props.datatype.format === 'basic_time_no_millis' ?
		false :
		getMomentDate(this.props.datatype.format)
	}
	timeFormat={
		!(this.props.datatype.format === 'YYYY/MM/DD' || this.props.datatype.format === 'basic_date' || this.props.datatype.format === 'date')
	}
	onBlur={(e) => {
		this.handleDatetimeChange(e);
		this.setState({ active: false });
	}}
	inputProps={{
		ref: (node) => { this.select = node; }
	}}
/>

8. For selecting a date range check the docs on react-datetime.
9. Once the filter is applied it would execute the applyFilter method in HomePage component. This component uses some global variables to run the filtered query from feed.js. If the query gets applied correctly, the data should get updated in the view.

[MPierre9]

Hello! Can I try to implement this?

[divyanshu013]

Sure, please feel free to take it up :)

[MPierre9]

I got the react datetime to work with FilterDropdown, however, I can't seem to find a workaround to retrieve the calendars value and apply it. Right now it seems like were using onKeyUp to retrieve the input tags value but this doesn't really work when the user clicks a date with react datetime. When I manually type in the date input tag it works and I can apply the date filter but it isn't really practical for production.

Is there a way to grab input field values when the user clicks apply? I think this may work better than using onKeyUp to grab the value.

Thanks @divyanshu013 for the great explanation.

Example

Code for React Datetime

<DateTime dateFormat='YYYY-MM-DD' closeOnSelect= {true} timeFormat= {false} inputProps={{ placeholder: 'select date', id: keyInput, className: 'form-control' }} />

[divyanshu013]

Hey @MPierre9, great work, I think you're quite close 😸

The onKeyUp isn't a good approach (I didn't notice we were using it). I think you should try onValueChange which should cover all usecases. Just a heads up, you might need some changes in the rangeChange method to make it work. Also when you're done making the changes, can you also test and see if it's working for other fields (besides date) too.

[MPierre9]

Sure thing @divyanshu013, thanks for the help! I'll try it out.

[thomasbalezeau]

hello , is the feature coming soon ? thanks