reactjs 剑道React网格:如何专门为日期及其筛选自定义列菜单筛选器

pgx2nnw8  于 2023-05-28  发布在  React
关注(0)|答案(2)|浏览(155)

我有一个包含几列的组件。其中一个是日期栏。现在,我想从列菜单筛选器中筛选该列,但无法自定义它。我希望过滤器有一个自定义的格式,如MM/dd/yy或dd/MM/yy(占位符和值),根据我的地区。有人能指导我如何做到这一点吗?由于通用列过滤器菜单给我月/日/年(占位符)和相同的日期格式。在这里发布一些代码。

Component.jsx

import { Grid } from '@progress/kendo-react-grid';
import { GridColumnMenuFilter } from '@progress/kendo-react-grid';

<Grid useColumnFilterMenu>
    <Column
        field="joinDate"
        title={locale('joinDateTitle')}
        format={`{0:${locale('joinDateFormat')}}`}
        filter="date"
        columnMenu={props => {
            <GridColumnMenuFilter {...props} />
        }
     />
....
....
</Grid>

这里,joinDateFormat -是MM/dd/yy或dd/MM/yy格式。这显示了API调用的结果,非常好。但我正在努力与列过滤器和它的占位符和日期格式,根据我的地区变化。

m528fe3b

m528fe3b1#

我们可以使用GridColumnMenuFilterfilterUI属性来实现这一点。

omqzjyyz

omqzjyyz2#

如果只是格式问题,并且您希望它与您的区域设置匹配,则可以使用Kendo IntlProviderhttps://www.telerik.com/kendo-react-ui/components/intl/i18n/
下面是一个功能性的StackBlitz,演示了这种方法:https://stackblitz.com/edit/react-o5gz9j?file=app%2Fmain.tsx
下面是另一种方法,演示如何设置DateInputPropsContext以实现类似的结果:https://stackblitz.com/edit/react-3pamhz?file=app%2Fmain.tsx

相关问题