我希望能及时地在reactjs中分出几个插槽。

Question

我只是创建这个时间选择器使用梅和动量。2时间选择器，一个输入，和一个按钮，当用户选择特定的时间，如在第一个选择上午8:00和在第二个是上午9:00，并输入插槽类似6，因此输出将是8:00-8:10，8:10-8:20，8:20-8:30，8:40 - 8:50，8:50 -9:00。我不想再想逻辑了。

​

​

import * as React from "react";
import TextField from "@mui/material/TextField";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import { Box } from "@mui/system";
import moment from "moment";
import { Button, Grid } from "@mui/material";
import Paper from "@mui/material/Paper";
export default function BasicDatePicker() {
  const [startTime, setStartTime] = React.useState([]);
  const [endTime, setEndTime] = React.useState([]);
  return (
    <Box
      component="main"
      sx={{ flexGrow: 1, p: 3 }}
      style={{ marginTop: "100px" }}
    >
      <LocalizationProvider
        dateAdapter={AdapterDateFns}
        sx={{ flexGrow: 1, p: 3 }}
      >
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            "& > :not(style)": {
              m: "0 auto",
              width: 300,
              height: 350,
            },
          }}
        >
          <Paper elevation={3}>
            <Grid container>
              <Grid item xs={12} style={{ margin: "25px" }}>
                <TimePicker
                  label="Start Time"
                  value={startTime}
                  onChange={(newValue) => {
                    setStartTime(newValue);
                    // setStartTime(moment(newValue).add(1, "days"));
                    // console.log(newValue)
                  }}
                  renderInput={(params) => <TextField {...params} />}
                />
              </Grid>
              <Grid item xs={12} style={{ margin: "25px" }}>
                <TimePicker label="End Time"
                  // disabled
                  value={endTime}
                  onChange={(newValue) => {
                    setEndTime(newValue);
                  }}
                  renderInput={(params) => <TextField {...params} />}
                />
              </Grid>
              <Grid item xs={12} style={{ textAlign: "center" , }}>
                {" "}
                <TextField id="outlined-basic" label="Slot" variant="outlined"/>
              </Grid>
              <Grid item xs={12} style={{ textAlign: "center", margin: "10px" }}>
                {" "}
               <Button variant="contained">Action</Button> 
              </Grid>
            </Grid>
          </Paper>
        </Box>
      </LocalizationProvider>
    </Box>
  );
}

Answer 1

在这里，您可以使用这个函数，将矩对象传递给函数。

const today = moment();
const someday = moment().add(1,"h");

function getSlots(one, two){
    const slots = [];
    while(one.unix() < two.unix()){
        const tmp = one;
        const slot = `${tmp.format("h:mm")}-${one.add(10,"m").format("h:mm")}`;
    }

    return slots;
}

console.log(getSlots(today, someday,"10 min"));