import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import Flatpickr from 'react-flatpickr'; import 'flatpickr/dist/flatpickr.css'; import Nouislider from '@x1mrdonut1x/nouislider-react'; import 'nouislider/distribute/nouislider.css'; import { useDispatch, useSelector } from 'react-redux'; import { IRootState } from '../../store'; import { setPageTitle } from '../../store/themeConfigSlice'; const DateRangePicker = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Date & Range Picker')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false; const [inputStart, setInputStart] = useState(20); const [inputEnd, setInputEnd] = useState(40); const [slider2, setSlider2] = useState([500, 4000]); const [percent2, setPercent2] = useState([5, 40]); const [disabled, setDisabled] = useState(false); const [skippingValue, setSkippingValue] = useState(40); const [skippingValue1, setSkippingValue1] = useState(40); const changeValue = () => { setDisabled(!disabled); }; const slider1Update = (range: any) => { setInputStart(range[0]); setInputEnd(range[1]); }; const onSide = (render: any, handle: any, value: any, un: any, percent: any) => { setSlider2(value); setPercent2(percent); }; const [date1, setDate1] = useState('2022-07-05'); const [date2, setDate2] = useState('2022-07-05 12:00'); const [date3, setDate3] = useState('2022-07-05 to 2022-07-10'); const [date4, setDate4] = useState('13:45'); const [range1, setRange1] = useState('0'); const [range2, setRange2] = useState('0'); const [range3, setRange3] = useState('0'); const [range4, setRange4] = useState('0'); return (
  • Forms
  • Date and Range Picker
Date and Time Picker
{/* Basic */}
Basic
setDate1(date)} />
{codeArr.includes('code1') && ( 
{`import { useState } from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch();
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false;
const [date1, setDate1] = useState('2022-07-05');

 setDate1(date)} />`}
 )}
{/* Date & time */}
Date Time
Use {` {enableTime: true, dateFormat: 'Y-m-d H:i'}`} option to enable time support
setDate2(date2)} />
{codeArr.includes('code2') && ( 
{`import { useState } from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch();
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false;
const [date2, setDate2] = useState('2022-07-05 12:00');

 setDate2(date2)}
/>`}
 )}
{/* range-calendar */}
Range Calendar
Use {`{mode: 'range'}`} select the date with range.
setDate3(date3)} />
{codeArr.includes('code3') && ( 
{`import { useState } from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch();
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false;
const [date3, setDate3] = useState('2022-07-05 to 2022-07-10');

 setDate3(date3)}
/>`}
 )}
{/* preloading time */}
Preloading Time
Use {` {noCalendar: true, enableTime: true, dateFormat: 'H:i'} `} with Date Time options to disable calendar and show time picker only.
setDate4(date4)} />
{codeArr.includes('code4') && ( 
{`import { useState } from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch();
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false;
const [date4, setDate4] = useState('13:45');

 setDate4(date4)}
/>`}
 )}
{/* range picker */}
Javascript Range Slider
{/* Top-Left */}
Postion : Top-Left
{range1} %
setRange1(e.target.value)} />
{codeArr.includes('code5') && ( 
{`import { useState } from 'react';
const [range1, setRange1] = useState('0');



    

        {range1}
        %
    

     setRange1(e.target.value)} />

`}
 )}
{/* Top-right */}
Postion : Top-right
{range2} %
setRange2(e.target.value)} />
{codeArr.includes('code6') && ( 
{`import { useState } from 'react';
const [range2, setRange2] = useState('0');



    

        {range2}
        %
    

     setRange2(e.target.value)} />

`}
 )}
{/* bottom-left */}
Postion : Bottom-Left
setRange3(e.target.value)} />
{range3} %
{codeArr.includes('code7') && ( 
{`import { useState } from 'react';
const [range3, setRange3] = useState('0');



     setRange3(e.target.value)} />
    

        {range3}
        %
    


`}
 )}
{/* Bottom-right */}
Postion : Bottom-right
setRange4(e.target.value)} />
{range4} %
{codeArr.includes('code8') && ( 
{`import { useState } from 'react';
const [range4, setRange4] = useState('0');



     setRange4(e.target.value)} />
    

        {range4}
        %
    


`}
 )}
{/* Nouislider */}
noUI Slider
{/* Using HTML5 input elements */}
Using HTML5 input elements
setInputEnd(e.target.value)} />
{codeArr.includes('code9') && ( 
{`import { useState } from 'react';

const [inputStart, setInputStart] = useState(20);
const [inputEnd, setInputEnd] = useState(40);
const slider1Update = (range: any) => {
    setInputStart(range[0]);
    setInputEnd(range[1]);
};



    
    

        

            
        

        

             setInputEnd(e.target.value)} />
        

    


`}
 )}
{/* Non linear slider */}
Non linear slider
{parseInt(slider2[0]).toFixed(2)} {`${parseInt(percent2[0])}%`}
{parseInt(slider2[1]).toFixed(2)} {`${parseInt(percent2[1])}%`}
{codeArr.includes('code10') && ( 
{`import { useState } from 'react';

const [slider2, setSlider2] = useState([500, 4000]);
const [percent2, setPercent2] = useState([5, 40]);
const onSide = (render: any, handle: any, value: any, un: any, percent: any) => {
    setSlider2(value);
    setPercent2(percent);
};



    

    

        

            
                {parseInt(slider2[0]).toFixed(2)}
            
            
                {\`\${parseInt(percent2[0])}%\`}
            
        

        

            
                {parseInt(slider2[1]).toFixed(2)}
            
            
                {\`\${parseInt(percent2[1])}%\`}
            
        

    


`}
 )}
{/* Locking slider */}
Locking sliders together
setSkippingValue(value)} />
Value: {skippingValue}
setSkippingValue1(value)} tooltips={true} />
Value: {skippingValue1}
{disabled === false ? ( ) : ( )}
{codeArr.includes('code11') && ( 
{`import { useState } from 'react';

const [disabled, setDisabled] = useState(false);
const [skippingValue, setSkippingValue] = useState(40);
const [skippingValue1, setSkippingValue1] = useState(40);
const changeValue = () => {
    setDisabled(!disabled);
};



     setSkippingValue(value)}
    />
    
Value: {skippingValue}

    

     setSkippingValue1(value)}
        tooltips={true}
    />
    
Value: {skippingValue1}

    

    

        {disabled === false ? (
            
        ) : (
            
        )}
    


`}
 )}
); }; export default DateRangePicker;