akbari-react-date-picker
react datepicker support persian jalali datepicker and Gregorian datepicker
Added new Themes in new version ...
this is a fantastic datepicker with support persian jalali and en Gregorian for react . support responsive pretty mode. clear value with icon in new version . new version is comming soon ....
Demo
desktop mode
responsive mode
Install
Step-One
run
npm install --save akbari-react-date-pickerStep-two
import these lines in App.js . App.js is in Src/App.js of react project .
import { AkbariDatePicker } from 'akbari-react-date-picker'
import 'akbari-react-date-picker/dist/index.css'
dont forget top lines specially css file
props
| prop | type | default |
|---|---|---|
| input_type | string | jalali |
| current_date | string | system current date to persian |
| min_date | string | 30 years old |
| max_date | string | 30 years later |
| on_change_date | function | null |
| theme | string | light (blue, red, yellow, navy_blue) |
function
change_date()
see example of change_date() in bottom of page
Step-three
simple example of use
<AkbariDatePicker
input_type={'jalali'}
on_change_date={(date) => on_change_date(date)}
current_date={'1399/8/7'}
min_date={'1300/8/5'}
max_date={'1400/5/9'}
ref={ref}
width="300px"
theme='blue'
/>
full example of code in function component
import React, {useEffect, useRef, useState } from 'react'
import { AkbariDatePicker } from 'akbari-react-date-picker'
import 'akbari-react-date-picker/dist/index.css'
const App = () => {
const ref = useRef(null);
const [current_date, set_current_date] = useState('1399/10/5')
const [min_date, set_min_date] = useState('1300/5/5')
const [max_date, set_max_date] = useState('1403/8/4');
const [input_type, set_input_type] = useState('jalali')
useEffect(() => {
}, [])
const on_change_date = (date) => {
alert(date);
}
return (
<>
<div className="input">
<AkbariDatePicker
input_type={input_type}
current_date={current_date}
on_change_date={(date) => on_change_date(date)}
min_date={min_date}
max_date={max_date}
ref={ref}
width="300px"
theme='blue'
/>
</div>
</>
)
}
export default App
full example of code in React class component
import React, { useEffect, useRef, useState } from 'react'
import { AkbariDatePicker } from 'akbari-react-date-picker'
import 'akbari-react-date-picker/dist/index.css'
class App extends React.Component {
constructor() {
super();
this.state = {
current_date: '1399/10/5',
min_date: '1300/5/5',
max_date: '1403/8/4',
input_type: 'jalali'
}
this.ref = React.createRef();
}
componentDidMount() {
}
on_change_date(date) {
alert(date);
}
render() {
return (
<>
<div className="input">
<AkbariDatePicker input_type={this.state.input_type} current_date={this.state.current_date}
on_change_date={this.on_change_date.bind(this)}
min_date={this.state.min_date}
max_date={this.state.max_date}
ref={this.ref} width="300px"
theme='red'
/>
</div>
<div className="foo"></div>
</>
)
}
}
export default App
if you want persian or jalali date you have to enter all prop dates in persian format for example 1399/4/8
if you want Gregorian or en date you have to enter all prop dates in Gregorian format for example 2020/4/8
props
input_type => type ="string" => select what format of date picker you want persian jalali or en Gregorian
for persian
<AkbariDatePicker input_type={'jalali'} />
for en Gregorian
<AkbariDatePicker input_type={'gregorian'} />
current_date => type ="string" => this is default date
you can pass type string;
example of persian date
<AkbariDatePicker input_type={'jalali'} current_date={'1399/5/7'} />
example of en or Gregorian date
<AkbariDatePicker input_type={'gregorian'} current_date={'2020/5/7'} />
min_date => type ="string" => this is min date
you can pass type string;
example of persian date
<AkbariDatePicker input_type={'jalali'} min_date={'1300/10/4'} />
example of en or Gregorian date
<AkbariDatePicker input_type={'gregorian'} min_date={'2010/10/7'} />
max_date => type ="string" => this is max date
you can pass type string;
example of persian date
<AkbariDatePicker input_type={'jalali'} max_date={'1400/10/4'} />
example of en or Gregorian date
<AkbariDatePicker input_type={'gregorian'} max_date={'2030/10/7'} />
width => type ="string" => width of where selected date text placed.
you can pass type string;
example
<AkbariDatePicker width="300px" />
theme => type ="string" => themes => 'blue', 'red', 'yellow', 'navy_blue'
you can pass type string;
example
/// light
<AkbariDatePicker theme='light' />
/// blue
<AkbariDatePicker theme='blue' />
/// red
<AkbariDatePicker theme='red' />
/// yellow
<AkbariDatePicker theme='yellow' />
///navy_blue
<AkbariDatePicker theme='navy_blue' />
function props
on_change_date => when user select date this prop calls.
example in function component
const on_change_date = (date) => {
alert(date);
}
return(
<AkbariDatePicker on_change_date={(date) => on_change_date(date)} />
)
example in function component
example in class component
on_change_date(date) {
alert(date);
}
<AkbariDatePicker on_change_date={this.on_change_date.bind(this)} />
clear_value => clear selected date;
first you have to ref to component .
example of function component
const ref = useRef(null);
useEffect(() => {
/// clear
ref.current.clear_value();
}, [])
return(
<AkbariDatePicker ref={ref} />
)
example of class component
constructor(){
this.ref = React.createRef();
}
componentDidMount(){
/// clear
this.ref.current.clear_value();
}
render(){
return(
<AkbariDatePicker ref={this.ref} />
)
}
change_date => you can change date programmatically after click some buttons or ...
first you have to ref to component .
example of function component
const ref = useRef(null);
return(
<AkbariDatePicker ref={ref} />
)
example of class component
constructor(){
this.ref = React.createRef();
}
render(){
return(
<AkbariDatePicker ref={this.ref} />
)
}
then you have to change date props for example
in function component
const [current_date, set_current_date] = useState('1399/10/5')
const [min_date, set_min_date] = useState('1300/5/5')
const [max_date, set_max_date] = useState('1403/8/4')
const [input_type, set_input_type] = useState('jalali')
const ref = useRef(null);
useEffect(() => {
setTimeout(() => {
set_current_date('1400/4/8')
set_min_date('1299/8/10')
set_max_date('1410/12/10')
set_input_type('gregorian')
/// then call change_date from ref
ref.current.change_date();
}, 3000);
return (
<>
<div className="input">
<AkbariDatePicker
input_type={input_type}
ref={ref}
current_date={current_date}
min_date={min_date}
max_date={max_date}
/>
</div>
</>
)
in class component
constructor() {
super();
this.state = {
current_date: '1399/10/5',
min_date: '1300/5/5',
max_date: '1403/8/4',
input_type: 'jalali'
}
this.ref = React.createRef();
}
componentDidMount() {
setTimeout(() => {
this.setState({
current_date: '2020/8/5',
min_date: '2010/5/9',
max_date: '2040/10/5',
input_type: 'gregorian'
});
/// then call change_date from ref
this.ref.current.change_date();
}, 3000);
}
render() {
return (
<>
<div className="input">
<AkbariDatePicker
input_type={this.state.input_type}
current_date={this.state.current_date}
min_date={this.state.min_date}
max_date={this.state.max_date}
ref={this.ref}
/>
</div>
</>
)
}
then call change date from ref = change_date()
in function component
const ref = React.createRef();
const [current_date, set_current_date] = useState('1399/10/5')
const [min_date, set_min_date] = useState('1300/5/5')
const [max_date, set_max_date] = useState('1403/8/4')
const [input_type, set_input_type] = useState('jalali')
useEffect(() => {
setTimeout(() => {
set_current_date('1400/4/8')
set_min_date('1299/8/10')
set_max_date('1410/12/10')
set_input_type('gregorian')
ref.current.change_date(); /// call change_date from ref
}, 3000);
}, [])
return (
<>
<div className="input">
<AkbariDatePicker
input_type={input_type}
ref={ref}
current_date={current_date}
min_date={min_date}
max_date={max_date}
/>
</div>
</>
)
in class component
constructor() {
super();
this.state = {
current_date: '1399/10/5',
min_date: '1300/5/5',
max_date: '1403/8/4',
input_type: 'jalali'
}
this.ref = React.createRef();
}
componentDidMount() {
setTimeout(() => {
this.setState({
current_date: '2020/8/5',
min_date: '2010/5/9',
max_date: '2040/10/5',
input_type: 'gregorian'
});
/// then call change_date from ref
this.ref.current.change_date();
}, 3000);
}
render() {
return (
<>
<div className="input">
<AkbariDatePicker
input_type={this.state.input_type}
current_date={this.state.current_date}
min_date={this.state.min_date}
max_date={this.state.max_date}
ref={this.ref}
/>
</div>
</>
)
}
