React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente React Suite DateRangePicker proporciona al usuario una interfaz para seleccionar un rango de fechas.
La apariencia del componente React Suite DateRangePicker define cómo aparecerá visualmente el DateRangePicker para los usuarios. Tiene dos opciones que toman un valor ya sea «predeterminado» o «sutil».
Sintaxis:
<DateRangePicker appearance="subtle" />
Requisito previo:
- Introducción e instalación reactJS
- Componente React Suite DateRangePicker
Creación de la aplicación React y la instalación del módulo:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app.
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Paso 3: ahora instala la dependencia usando el siguiente comando:
npm install rsuite
Estructura del proyecto: Se verá así:
Ejemplo 1: estamos importando el componente DateRangePicker de “rsuite”, y para aplicar los estilos predeterminados de los componentes estamos importando “rsuite/dist/rsuite.min.css”. Al componente DateRangePicker, le proporcionamos la propiedad de apariencia como «predeterminada».
App.js
import { DateRangePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
return (
<div className="App">
<h3>React Suite DateRangePicker Appearance</h3>
<p>Appearance = default</p>
<DateRangePicker appearance="default" />
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Ejemplo 2: estamos importando el componente DateRangePicker de “rsuite”, y para aplicar los estilos predeterminados de los componentes estamos importando “rsuite/dist/rsuite.min.css”. Al componente DateRangePicker, le estamos proporcionando la apariencia como «sutil».
App.js
import { DateRangePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
return (
<div className="App">
<h3>React Suite DateRangePicker Appearance</h3>
<p>Appearance = subtle</p>
<DateRangePicker appearance="subtle" />
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://rsuitejs.com/components/date-range-picker/#appearance