React Suite DatePicker Usage Native Pickers

0 0 1 minute read

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>zambiatek</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>zambiatek</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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!