انتقال
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[transition()]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
سفارشی کردن انتقال #1
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[
transition({ duration: 800, from: 35 })
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
سفارشی کردن انتقال #2
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[
transition({
from: 35,
transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
}),
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
تیرگی
import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[opacity()]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
سفارشی کردن تیرگی
import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[
opacity({ from: 0.1, to: 0.8, duration: 1000 })
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
اندازه
import DatePicker from "react-multi-date-picker"
import size from "react-element-popper/animations/size"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[size()]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
انتقال و تیرگی #1
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[
opacity(),
transition({ from: 35, duration: 800 })
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}
انتقال و تیرگی #2
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
export default function Example() {
return (
<DatePicker
animations={[
opacity(),
transition({
from: 40,
transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
}),
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-center"
/>
)
}