In this article, we’ll learn about React suite DatePicker Native Pickers. The DatePicker Component is used to choose a time or date from the picker. We use native pickers when we only need to meet the simple date selection function.
Syntax:
<Input type="date ||
datetime-local ||
week || time"
/>
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Project Structure: Now your project structure should look like the following:
Example 1: Below example demonstrates the date and datetime-local of the React Suite Native Pickers component in DatePicker.
Javascript
import { Input } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div> <div style={{ textAlign: "center", }} > <h2>neveropen</h2> <h4 style={{ color: "green", }} > React Suite DatePicker Native Picker </h4> </div> <div style={{ padding: 20, textAlign: "center", }} > <div style={{ width: 200, }} > <p>Type: date</p> <Input type="date" /> <p style={{ marginTop: 10, }} > Type: datetime-local </p> <Input type="datetime-local" /> </div> </div> </div> ); } export default App; |
Output:
React Suite DatePicker Usage Native pickers
Example 2: Below example demonstrates the week and time of the React Suite Native Picker component in DatePicker.
Javascript
import { Input } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div> <div style={{ textAlign: "center", }} > <h2>neveropen</h2> <h4 style={{ color: "green", }} > React Suite DatePicker Native Picker </h4> </div> <div style={{ padding: 20, textAlign: "center", }} > <div style={{ width: 200, }} > <p>Type: date</p> <Input type="date" /> <p style={{ marginTop: 10, }} > Type: datetime-local </p> <Input type="time" /> </div> </div> </div> ); } export default App; |
Output:
React Suite DatePicker Usage Native pickers
Reference: https://rsuitejs.com/components/date-picker/#native-pickers
