parent
							
								
									f946f473cc
								
							
						
					
					
						commit
						73e1f0321a
					
				
				 4 changed files with 57 additions and 16 deletions
			
			
		| @ -0,0 +1,53 @@ | |||||||
|  | import React from "react"; | ||||||
|  | 
 | ||||||
|  | import DatePicker from "react-multi-date-picker"; | ||||||
|  | import { Calendar } from "react-multi-date-picker"; | ||||||
|  | 
 | ||||||
|  | import persian from "react-date-object/calendars/persian"; | ||||||
|  | import persian_fa from "react-date-object/locales/persian_fa"; | ||||||
|  | import DatePanel from "react-multi-date-picker/plugins/date_panel"; | ||||||
|  | 
 | ||||||
|  | const weekDays = [ | ||||||
|  |   "شنبه", | ||||||
|  |   "یکشنبه", | ||||||
|  |   "دوشنبه", | ||||||
|  |   "سشنبه", | ||||||
|  |   "چهارشنبه", | ||||||
|  |   "پنجشنبه", | ||||||
|  |   "جمعه", | ||||||
|  | ]; | ||||||
|  | 
 | ||||||
|  | function CustomButton({ direction, handleClick, disabled }) { | ||||||
|  |   return ( | ||||||
|  |     <i | ||||||
|  |       onClick={handleClick} | ||||||
|  |       style={{ | ||||||
|  |         padding: "0 10px", | ||||||
|  |         fontWeight: "bold", | ||||||
|  |         color: disabled ? "gray" : "blue", | ||||||
|  |       }} | ||||||
|  |       className={disabled ? "cursor-default" : "cursor-pointer"} | ||||||
|  |     > | ||||||
|  |       {direction === "right" ? ">" : "<"} | ||||||
|  |     </i> | ||||||
|  |   ); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | const DateRangePicker = () => { | ||||||
|  |   return ( | ||||||
|  |     <> | ||||||
|  |       <Calendar | ||||||
|  |         range | ||||||
|  |         calendar={persian} | ||||||
|  |         locale={persian_fa} | ||||||
|  |         weekDays={weekDays} | ||||||
|  |         minDate={new Date()} | ||||||
|  |         renderButton={<CustomButton />} | ||||||
|  |         calendarPosition="bottom-right" | ||||||
|  |         plugins={[<DatePanel position="bottom" />]} | ||||||
|  |       /> | ||||||
|  |     </> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default DateRangePicker; | ||||||
					Loading…
					
					
				
		Reference in new issue