React Suite DateRangePicker ts:Range Prop
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React suite DateRangePicker ts:Range Prop. DateRangePicker is used to quickly select a date range. To define the specific DateRangePicker label, values, or closeOverlay, we can create an interface using ts:Range prop.
DateRangePicker Prop:
-
label: It is used to add the range label of datepicker component.
-
value: It defines the range value that is defined by the user.
-
closeOverlay: It is a boolean value.
-
placement: It is used to define the placement of the component.
Syntax:
interface Range {
label: React.ReactNode;
value: Date | ((date: Date) => Date);
closeOverlay?: boolean;。
placement?: 'bottom' | 'left';
}
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 ts:Range prop of daterangepicker component.
Javascript
import "rsuite/dist/rsuite.min.css" ;
import { DateRangePicker } from "rsuite" ;
import addDays from "date-fns/addDays" ;
export default function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite DateRangePicker ts:Range Prop
</h4>
</div>
<div style={{ padding: 20, textAlign: "center" }}>
<div>
<DateRangePicker
ranges={[{
label: "Yesterday" ,
value: [addDays( new Date(), -1),
addDays( new Date(), -1)],
},
{
label: 'Today' ,
value: [ new Date(), new Date()]
}]}
/>
</div>
</div>
</div>
);
}
|
Output:
Example 2: Another example demonstrating the ts:Range prop with closeOverlay of daterangepicker component.
Javascript
import "rsuite/dist/rsuite.min.css" ;
import { DateRangePicker } from "rsuite" ;
import addDays from "date-fns/addDays" ;
import subDays from 'date-fns/subDays' ;
export default function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite DateRangePicker ts:Range Prop
</h4>
</div>
<div style={{ padding: 20, textAlign: "center" }}>
<div>
<DateRangePicker
ranges={[
{
label: "Yesterday" ,
value: [addDays( new Date(), -1),
addDays( new Date(), -1)],
},
{
label: 'Today' ,
value: [ new Date(), new Date()]
},
{
label: 'Last 7 days ' ,
value: [subDays( new Date(), 6),
new Date()],
closeOverlay: true
}
]}
/>
</div>
</div>
</div>
);
}
|
Output:
Reference: https://rsuitejs.com/components/date-range-picker/#code-ts-range-code
Last Updated :
26 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...