update src/components/TestComponentNew/index.js and src/components/TestComponentNew/index.scss

master
mahdi andalib 2 years ago
parent 172f2f2c8a
commit 1ebd5c76ca
  1. 10
      src/components/TestComponentNew/index.js
  2. 35
      src/components/TestComponentNew/index.scss

@ -27,14 +27,14 @@ function CustomRangeInput({ openCalendar, value }) {
return (
<div className="flex flex-row items-center ">
<input
className="w-full py-1 text-center text-sm rounded-md border border-gray-200 focus:outline-none focus:border-sky-200 focus:ring-sky-200 focus:ring-1"
className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
onFocus={openCalendar}
value={value[0]}
readOnly
/>
<p className="mx-2 text-sm">تا</p>
<input
className="w-full py-1 text-center text-sm rounded-md border border-gray-200 focus:outline-none focus:border-sky-200 focus:ring-sky-200 focus:ring-1"
className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
onFocus={openCalendar}
value={value[1]}
readOnly
@ -42,12 +42,10 @@ function CustomRangeInput({ openCalendar, value }) {
</div>
);
}
const TestComponentNew = () => {
return (
<div
className="bg-pink-100 w-1/2 mx-auto mt-20"
style={{ direction: "rtl" }}
>
<div className="w-1/2 mx-auto" style={{ direction: "rtl" }}>
<Calendar calendar={persian} locale={persian_fa} />
<hr className="my-20" />
<DatePicker

@ -1,19 +1,3 @@
// .custom-input {
// border-radius: 15px;
// border: 1px #0c8af8 solid;
// padding: 4px 12px;
// background-color: white;
// height: 22px;
// box-shadow: 0 0 2px #0074d9;
// display: none !important;
// }
// .custom-input:focus {
// outline: none;
// border: 1px solid #0c8af8;
// box-shadow: 0 0 10px 2px #0074d9;
// }
.rmdp-arrow-container {
background-color: #0074d9;
border-radius: 2px !important;
@ -21,8 +5,27 @@
width: 24px !important;
}
.rmpd-day.rmdp-range.start {
background: red !important;
}
.rmdp-arrow-container .rmdp-arrow {
border: solid #fff;
border-width: 0 2px 2px 0;
margin-top: 8px !important;
}
.rmdp-wrapper .start {
background: #0074d9 !important;
color: #fff !important;
}
.rmdp-wrapper .end {
background: #0074d9 !important;
color: #fff !important;
}
.rmdp-range {
background: #f5f5f5 !important;
color: #0074d9 !important;
}

Loading…
Cancel
Save