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•14mo 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•14mo ago

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

generous-apricot•14mo 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.

How to draw filter datepicker?

Did you find this page helpful?