You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The DateFilter autocompletes the input (when entered manually) on the first character to become 000[entered character]-01-01 instead of waiting for more characters.
You can reproduce this on the "https://reactdatagrid.io/docs/filtering" site on the Date filters demo.
It works fine (it doesn't autocomplete) when used with inrange, for example the demo with the Range filters.
The demo code copied from the site:
import React, { useState } from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'
import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter'
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
import CheckBox from '@inovua/reactdatagrid-community/packages/CheckBox'
import flags from './flags'
import contacts from './contacts'
const gridStyle = { minHeight: 600 }
const columns = [
{ name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 50, type: 'number' },
{ name: 'firstName', defaultFlex: 1, maxWidth: 200, header: 'First name' },
{
name: 'address',
defaultFlex: 1,
header: 'Address'
},
{
name: 'createdOn',
header: 'User created date',
defaultFlex: 1,
// need to specify dateFormat
dateFormat: 'YYYY-MM-DD',
filterEditor: DateFilter,
filterEditorProps: (props, { index }) => {
// for range and notinrange operators, the index is 1 for the after field
return {
dateFormat: 'MM-DD-YYYY',
placeholder: index == 1 ? 'Created date is before...': 'Created date is after...'
}
},
render: ({ value, cellProps: { dateFormat } }) =>
moment(value).format(dateFormat),
}
];
Version: @inovua/reactdatagrid-community@5.10.2
The DateFilter autocompletes the input (when entered manually) on the first character to become 000[entered character]-01-01 instead of waiting for more characters.
You can reproduce this on the "https://reactdatagrid.io/docs/filtering" site on the Date filters demo.
It works fine (it doesn't autocomplete) when used with inrange, for example the demo with the Range filters.
The demo code copied from the site:
import React, { useState } from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'
import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter'
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
import CheckBox from '@inovua/reactdatagrid-community/packages/CheckBox'
import flags from './flags'
import contacts from './contacts'
const gridStyle = { minHeight: 600 }
const columns = [
{ name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 50, type: 'number' },
{ name: 'firstName', defaultFlex: 1, maxWidth: 200, header: 'First name' },
{
name: 'address',
defaultFlex: 1,
header: 'Address'
},
{
name: 'createdOn',
header: 'User created date',
defaultFlex: 1,
// need to specify dateFormat
dateFormat: 'YYYY-MM-DD',
filterEditor: DateFilter,
filterEditorProps: (props, { index }) => {
// for range and notinrange operators, the index is 1 for the after field
return {
dateFormat: 'MM-DD-YYYY',
placeholder: index == 1 ? 'Created date is before...': 'Created date is after...'
}
},
render: ({ value, cellProps: { dateFormat } }) =>
moment(value).format(dateFormat),
}
];
const defaultFilterValue = [
{ name: 'address', operator: 'startsWith', type: 'string', value: '' },
{ name: 'firstName', operator: 'startsWith', type: 'string', value: '' },
{ name: 'createdOn', operator: 'after', type: 'date', value: '' }
];
const App = () => {
const [enableFiltering, setEnableFiltering] = useState(true);
return (
Filterable DataGrid with date filter
<div style={{ marginBottom: 20 }}>
<CheckBox checked={enableFiltering} onChange={value => setEnableFiltering(value)}>Enable filtering
);
}
export default () =>
The text was updated successfully, but these errors were encountered: