3
votes

Sélecteur de plage de dates de l'interface utilisateur des matériaux

J'essaie de configurer un exemple de sélecteur de plage de dates d'interface utilisateur matérielle en suivant le code de la documentation, mais cela me donne une erreur, TypeError: undefined n'est pas une fonction.

Je n'ai jamais vu useState suivi d'un composant auparavant et c'est ce qui génère l'erreur.

React.useState<DateRange>([null, null])

https://dev.material-ui-pickers.dev/demo/daterangepicker

Code complet:

import * as React from "react";
import { TextField } from "@material-ui/core";
import { DateRangePicker, DateRange, DateRangeDelimiter } from "@material-ui/pickers";

function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);

  return (
    <DateRangePicker
      startText="Check-in"
      endText="Check-out"
      value={selectedDate}
      onChange={date => handleDateChange(date)}
      renderInput={(startProps, endProps) => (
        <>
          <TextField {...startProps} />
          <DateRangeDelimiter> to </DateRangeDelimiter>
          <TextField {...endProps} />
        </>
      )}
    />
  );
}

export default BasicDateRangePicker;

reactjs material-ui

5 commentaires

J'ai réalisé que l'erreur provenait de cela en utilisant TypeScript, ce que je ne suis pas, existe-t-il un moyen simple de le convertir en non TypeScript?

Supprimez simplement <DateRange> après `` React.useState`.

Cela génère une erreur différente "React.createElement: type is invalid - attend une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtient: undefined. Vous avez probablement oublié d'exporter votre composant à partir de dans lequel il est défini, ou vous avez peut-être confondu les importations par défaut et nommées "

Cet exemple concerne la v4. v4.0.0-alpha.7 vous v4.0.0-alpha.7 ? Ou utilisez-vous la v3?

J'utilise v4.0.0-alpha.7

3 Réponses :

0
votes

Le composant DateRangePicker également besoin du DateFnsAdapter et le bloc entier doit être encapsulé avec LocalizationProvider .

Votre code doit ressembler à ceci:

import React from 'react';
import { TextField } from "@material-ui/core";
import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns'; // choose your lib
import { DateRangePicker, DateRange, DateRangeDelimiter, LocalizationProvider } from "@material-ui/pickers";


function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <DateRangeDelimiter> to </DateRangeDelimiter>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
}

export default BasicDateRangePicker;

Vous pouvez en savoir plus sur dateAdapter dans le démarrage rapide et dans l' installation .

4 commentaires

Merci mais j'obtiens toujours une erreur TypeError: undefined n'est pas une fonction sur React.useState<DateRange>([null, null])

Je ne suis pas trop familier avec le typographie, VS Code dit que "les arguments de type ne peuvent être utilisés que dans les fichiers TypeScript" sur <DateRange>. Quelle en serait la version non dactylographiée?

Qu'en est-il de la version non dactylographiée? Y a-t-il ?

@Omid supprimez simplement le <DateRange> que vous avez là après le useState .

1
votes

Voici une version de travail. J'ai ajouté le LocalizationProvider et supprimé la <DateRange> .

import React from "react";
import TextField from "@material-ui/core/TextField";
import {
  DateRangePicker,
  DateRangeDelimiter,
  LocalizationProvider
} from "@material-ui/pickers";
import DateFnsUtils from "@material-ui/pickers/adapter/date-fns"; // choose your lib

export default function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState([null, null]);

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <DateRangeDelimiter> to </DateRangeDelimiter>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
}

0 commentaires

0
votes

J'étais également confronté à une erreur pour Mui DateRangePicker avec typographie, "Le type 'null []' manque les propriétés suivantes du type 'RangeInput': 0, 1"

dernières versions -> "@ material-ui / pickers": "^ 4.0.0-alpha.12", "date-fns": "^ 2.16.1"

Code de travail:

import React from "react";
import TextField from "@material-ui/core/TextField"
import {
  DateRangePicker,
  DateRangeDelimiter,
  LocalizationProvider,
  DateRange,
} from "@material-ui/pickers"
import DateFnsUtils from "@material-ui/pickers/adapter/date-fns"

export default function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange<Date | null>>([null, null]);

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DateRangePicker
        startText="from"
        endText="to"
        value={selectedDate}
        onChange={(date: any) => handleDateChange(date)}
        renderInput={(startProps: any, endProps: any) => (
            <>
              <TextField {...startProps} />
              <DateRangeDelimiter> to </DateRangeDelimiter>
              <TextField {...endProps} />
            </>
          )
        }
      />
    </LocalizationProvider>
  );
}

0 commentaires