How to draw filter datepicker?

I'm drawing a list with Grid using useMemo. At this time, I want to add a date search filter with Muy datepicker.

return (
    <Grid container>
      <Grid item xs={24} lg={12}>
        <Card sx={{paddingX: {xs: 2, md: 0}}}>
          <CardHeader title={"검색"}/>
          <CardContent sx={{pt: 0}}>
            <Box
              component="form"
              sx={{display: "flex", flexDirection: "column"}}
              autoComplete="off"
              onSubmit={handleSubmit(search)}
            >
              <TextField
                {...register("q")}
                label={"검색"}
                placeholder={"주문번호, 주문상태, 주문자, 상품명 등"}
                margin="normal"
                fullWidth
                autoFocus
                size="small"
              />

              <Button type="submit" variant="contained">
                검색하기
              </Button>
            </Box>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={24} lg={12}>
        <List
          title={"적립금 지급 내역"}

          wrapperProps={{sx: {paddingX: {xs: 2, md: 0}}}}
        >
          <Typography variant="body1" align="right">
            * 주문건에 대한 상세 내용이나, 클레임 처리, 구독신청 내역 확인 등은 기존 카페24 관리자 페이지에서 진행해 주세요.
          </Typography>
          {open && (
            <PointsDetail
              open={open}
              onClose={handleClose}
              pointDetail={pointDetail}
            />
          )}
          <DataGrid
            {...dataGridProps}
            columns={columns}
            filterModel={undefined}
            autoHeight
            pageSizeOptions={[10, 20, 50, 100]}
            rowHeight={80}
            sx={{
              ...dataGridProps.sx,
              "& .MuiDataGrid-row": {
                cursor: "pointer",
              },
            }}
          />
        </List>
      </Grid>
    </Grid>
  );

return (
    <Grid container>
      <Grid item xs={24} lg={12}>
        <Card sx={{paddingX: {xs: 2, md: 0}}}>
          <CardHeader title={"검색"}/>
          <CardContent sx={{pt: 0}}>
            <Box
              component="form"
              sx={{display: "flex", flexDirection: "column"}}
              autoComplete="off"
              onSubmit={handleSubmit(search)}
            >
              <TextField
                {...register("q")}
                label={"검색"}
                placeholder={"주문번호, 주문상태, 주문자, 상품명 등"}
                margin="normal"
                fullWidth
                autoFocus
                size="small"
              />

              <Button type="submit" variant="contained">
                검색하기
              </Button>
            </Box>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={24} lg={12}>
        <List
          title={"적립금 지급 내역"}

          wrapperProps={{sx: {paddingX: {xs: 2, md: 0}}}}
        >
          <Typography variant="body1" align="right">
            * 주문건에 대한 상세 내용이나, 클레임 처리, 구독신청 내역 확인 등은 기존 카페24 관리자 페이지에서 진행해 주세요.
          </Typography>
          {open && (
            <PointsDetail
              open={open}
              onClose={handleClose}
              pointDetail={pointDetail}
            />
          )}
          <DataGrid
            {...dataGridProps}
            columns={columns}
            filterModel={undefined}
            autoHeight
            pageSizeOptions={[10, 20, 50, 100]}
            rowHeight={80}
            sx={{
              ...dataGridProps.sx,
              "& .MuiDataGrid-row": {
                cursor: "pointer",
              },
            }}
          />
        </List>
      </Grid>
    </Grid>
  );

3 Replies

kapa.ai•9mo ago

Hi @florent_26629. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific examples or instructions on how to add a date search filter with MUI DatePicker to your existing code. However, you can refer to the Refine documentation (https://refine.dev/docs) or Material-UI DatePicker documentation (https://mui.com/components/date-picker/) for more information on how to implement this feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•9mo ago

Hello @florent_26629, you can check this documentation: https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid/#filtering

useDataGrid | refine

By using useDataGrid, you can get properties that are compatible with MUI X component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses useList for the fetch.