Скачать или смотреть Date range picker in react js || React date range picker || Date Picker || rsuite

Date range picker in react js
React date range picker
Date Picker
rsuite

source code :


install :: (npm install rsuite)


import { DateRangePicker } from 'rsuite';
import 'rsuite/dist/styles/rsuite-default.css';

*css*
/* text editor*/
.rs-picker-default .rs-picker-toggle.rs-btn {
padding-top: 7px;
padding-bottom: 7px;
width: 282px;
}

/* picked date align */
.rs-picker-default .rs-picker-toggle {
position: relative;
z-index: 5;
padding-right: 67px;
display: inline-block;
outline: none;
cursor: pointer;
color: #575757;
border: 1px solid #e5e5ea;
padding-left: 44px;
}
/* calander align */
.rs-picker-toggle-caret {
display: inline-block;
margin-right: 240px;
position: absolute;
top: 8px;
right: 12px;
font-weight: normal;
color: #8e8e93;
}

/* ok button style */
.rs-picker-toolbar-right-btn-ok {
text-align: center;
cursor: pointer;
outline: 0 ;
border: none;
padding: 8px 12px;
font-size: 14px;
border-radius: 30px;
color: #fff;
background-color: #3498ff;
width: 100px;
}

/* range style */
.rs-picker-menu .rs-calendar .rs-calendar-table-cell-content {
padding-left: 0;
padding-right: 0;
border-radius: 21px;
display: inline-block;
}

#reactjs #daterangepicker #multipledatepicker #codingcomics