this.setState({ value })}
35 | />
36 | }
37 | }
38 | `;
39 | const Jalaali = { component, title, code };
40 | export default Jalaali;
--------------------------------------------------------------------------------
/docs/src/examples/limitWithMinMax.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import momentJalaali from 'moment-jalaali'
3 | import Calendar from '../../../src/components/Calendar';
4 |
5 | class component extends React.Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {
10 | value: momentJalaali(),
11 | isGregorian: true
12 | };
13 |
14 | // limit selection to current months days
15 | this.enabledRange = {
16 | min: momentJalaali().startOf('month'),
17 | max: momentJalaali().endOf('month')
18 | };
19 |
20 | }
21 | render() {
22 | return
23 | this.setState({ value })}
31 | />
32 |
33 |
34 |
35 |
42 |
43 | }
44 | }
45 |
46 | const title = 'Limit Selection Range';
47 | const code = `class component extends React.Component {
48 | constructor(props) {
49 | super(props);
50 | this.state = {
51 | value: momentJalaali(),
52 | isGregorian: true
53 | };
54 | // limit selection to current months days
55 | this.enabledRange = {
56 | min: momentJalaali().startOf('month'),
57 | max: momentJalaali().endOf('month')
58 | };
59 | }
60 | render() {
61 | return
62 | this.setState({ value })}
68 | />
69 |
70 |
71 |
72 |
79 |
80 | }
81 | }
82 | `;
83 | const SwitchIsGregorian = { component, title, code };
84 | export default SwitchIsGregorian;
--------------------------------------------------------------------------------
/docs/src/examples/switchIsGregorian.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import momentJalaali from 'moment-jalaali'
3 | import DatePicker from '../../../src/components/DatePicker';
4 |
5 | class component extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | value: momentJalaali(),
10 | isGregorian: true
11 | };
12 | }
13 | render() {
14 | return
15 | this.setState({ value })}
21 | />
22 |
23 |
26 |
27 | }
28 | }
29 |
30 | const title = 'Switch IsGregorian';
31 | const code = `class component extends React.Component {
32 | constructor(props) {
33 | super(props);
34 | this.state = {
35 | value: momentJalaali(),
36 | isGregorian:true
37 | };
38 | }
39 | render() {
40 | return
41 | this.setState({ value })}
45 | />
46 |
47 |
50 |
51 | }
52 | }
53 | `;
54 | const SwitchIsGregorian = { component, title, code };
55 | export default SwitchIsGregorian;
--------------------------------------------------------------------------------
/docs/src/hero_example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import momentJalaali from 'moment-jalaali';
3 | import DatePicker from '../../src/index.dev.js';
4 |
5 | import Switch from 'react-switch';
6 |
7 | const buttonContainerStyle = {
8 | marginTop: 20
9 | };
10 | const labelStyle = {
11 | float: 'left'
12 | };
13 | const switchStyle = {
14 | float: 'right'
15 | };
16 |
17 | export default class ReactClass extends React.Component {
18 | constructor(props) {
19 | super(props);
20 | this.state = { value: momentJalaali(), checked: false };
21 | this.handleChange = this.handleChange.bind(this);
22 | }
23 |
24 | handleChange(checked) {
25 | this.setState({ checked });
26 | }
27 |
28 | render() {
29 | return (
30 |
31 |
32 | {
36 | this.setState({ value });
37 | }}
38 | value={this.state.value}
39 | />
40 |
41 |
42 |
62 |
15 |
16 |
17 |
18 |
19 | ReactJS Datepicker2
20 |
21 |
26 |
27 |
28 |
29 |
31 |
32 |
33 |
ReactJS Datepicker2
34 |
A simple and reusable datepicker component for React. (with persian jalaali calendar)
35 |
36 |
Installation
37 |
The package can be installed via NPM:
38 |
npm install react-datepicker2 --save
39 |
40 |
41 |
42 |
43 |
44 |
45 | 
46 |
47 |
65 |
68 |
69 | {colors.map((x, i) => (
70 |
71 | ))}
72 |
73 |
21 | {dayOfWeekNames.map((name, key) => (
22 |
{name}
23 | ))}
24 |
31 |
36 | {this.props.timePicker}
37 | {!this.props.isGregorian && (
38 |
39 |
46 |
53 |
54 | )}
55 | {this.props.isGregorian && (
56 |
57 |
64 |
71 |
72 | )}
73 |
74 | );
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/DefaultStyles.js:
--------------------------------------------------------------------------------
1 | export const defaultStyles = {
2 | calendarContainer: 'calendarContainer',
3 | heading: 'heading',
4 | prev: 'prev',
5 | next: 'next',
6 | title: 'title',
7 | dayWrapper: 'dayWrapper',
8 | currentMonth: 'currentMonth',
9 | daysOfWeek: 'daysOfWeek',
10 | yearsList: 'yearsList',
11 | monthsList: 'monthsList',
12 | selected: 'selected',
13 | today: 'today',
14 | dayPickerContainer: 'dayPickerContainer',
15 | disabled: 'disabled'
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/MonthSelector.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import momentJalaali from 'moment-jalaali';
4 | import classnames from 'classnames';
5 | import MonthsViewHeading from './MonthsViewHeading';
6 |
7 | // List of months
8 | const monthsJalaali = [
9 | 'فروردین',
10 | 'اردیبهشت',
11 | 'خرداد',
12 | 'تیر',
13 | 'مرداد',
14 | 'شهریور',
15 | 'مهر',
16 | 'آبان',
17 | 'آذر',
18 | 'دی',
19 | 'بهمن',
20 | 'اسفند'
21 | ];
22 |
23 | const monthsGregorian = [
24 | 'January',
25 | 'February',
26 | 'March',
27 | 'April',
28 | 'May',
29 | 'June',
30 | 'July',
31 | 'August',
32 | 'September',
33 | 'October',
34 | 'November',
35 | 'December'
36 | ];
37 |
38 | export default class MonthSelector extends Component {
39 | static propTypes = {
40 | styles: PropTypes.object,
41 | selectedMonth: PropTypes.object.isRequired,
42 | isGregorian: PropTypes.bool,
43 | disableYearSelector: PropTypes.bool,
44 | };
45 |
46 | static contextTypes = {
47 | setCalendarMode: PropTypes.func.isRequired,
48 | setMonth: PropTypes.func.isRequired
49 | };
50 |
51 | state = {
52 | year: this.props.selectedMonth
53 | };
54 |
55 | nextYear() {
56 | this.setState({
57 | year: this.state.year.clone().add(1, 'year')
58 | });
59 | }
60 |
61 | prevYear() {
62 | this.setState({
63 | year: this.state.year.clone().subtract(1, 'year')
64 | });
65 | }
66 |
67 | handleClick(key) {
68 | const { setMonth, setCalendarMode } = this.context;
69 | const { isGregorian } = this.props;
70 | const monthYearFormat = isGregorian ? 'M-YYYY' : 'jM-jYYYY';
71 | setMonth(momentJalaali(key, monthYearFormat));
72 | setCalendarMode('days');
73 | }
74 |
75 | render() {
76 | const { year } = this.state;
77 | const { selectedMonth, styles, isGregorian, disableYearSelector } = this.props;
78 | const yearFormat = isGregorian ? 'YYYY' : 'jYYYY';
79 | const monthYearFormat = isGregorian ? 'M-YYYY' : 'jM-jYYYY';
80 | const months = isGregorian ? monthsGregorian : monthsJalaali;
81 |
82 | return (
83 |
84 |
92 |
93 | {months.map((name, key) => {
94 | const buttonFingerprint = `${key + 1}-${year.format(yearFormat)}`;
95 | const selectedMonthFingerprint = selectedMonth.format(monthYearFormat);
96 | const isCurrent = selectedMonthFingerprint === buttonFingerprint;
97 |
98 | const className = classnames(styles.monthWrapper, {
99 | [styles.selected]: isCurrent
100 | });
101 |
102 | return (
103 |
104 |
105 |
106 | );
107 | })}
108 |
109 |
34 |
37 |
45 |
53 |
54 | );
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/TimePicker/Panel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import momentJalaali from 'moment-jalaali';
4 | import Header from './Header';
5 | import Combobox from './Combobox';
6 |
7 | function noop() {}
8 |
9 | function generateOptions(length, disabledOptions, hideDisabledOptions) {
10 | const arr = [];
11 | for (let value = 0; value < length; value++) {
12 | if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
13 | arr.push(value);
14 | }
15 | }
16 | return arr;
17 | }
18 |
19 | class Panel extends React.Component {
20 | static propTypes = {
21 | clearText: PropTypes.string,
22 | prefixCls: PropTypes.string,
23 | defaultOpenValue: PropTypes.object,
24 | value: PropTypes.object,
25 | placeholder: PropTypes.string,
26 | name: PropTypes.string,
27 | format: PropTypes.string,
28 | disabledHours: PropTypes.func,
29 | disabledMinutes: PropTypes.func,
30 | disabledSeconds: PropTypes.func,
31 | hideDisabledOptions: PropTypes.bool,
32 | onChange: PropTypes.func,
33 | onEsc: PropTypes.func,
34 | allowEmpty: PropTypes.bool,
35 | showHour: PropTypes.bool,
36 | showSecond: PropTypes.bool,
37 | onClear: PropTypes.func,
38 | showAMPM: PropTypes.bool,
39 | isGregorian: PropTypes.bool
40 | };
41 |
42 | static defaultProps = {
43 | prefixCls: 'rc-time-picker-panel',
44 | onChange: noop,
45 | onClear: noop,
46 | defaultOpenValue: momentJalaali()
47 | };
48 |
49 | constructor(props) {
50 | super(props);
51 | this.state = {
52 | value: this.props.value,
53 | selectionRange: []
54 | };
55 | }
56 |
57 | UNSAFE_componentWillReceiveProps(nextProps) {
58 | const { value } = nextProps;
59 | if (value) {
60 | this.setState({
61 | value
62 | });
63 | }
64 | }
65 |
66 | onChange = newValue => {
67 | this.setState({ value: newValue });
68 | this.props.onChange(newValue);
69 | };
70 |
71 | onClear = () => {
72 | this.props.onClear();
73 | };
74 |
75 | onCurrentSelectPanelChange = currentSelectPanel => {
76 | this.setState({ currentSelectPanel });
77 | };
78 |
79 | render() {
80 | const {
81 | isGregorian,
82 | formatter,
83 | prefixCls,
84 | className,
85 | placeholder,
86 | name,
87 | disabledHours,
88 | disabledMinutes,
89 | disabledSeconds,
90 | hideDisabledOptions,
91 | allowEmpty,
92 | showHour,
93 | showSecond,
94 | showAMPM,
95 | format,
96 | defaultOpenValue,
97 | clearText,
98 | onEsc
99 | } = this.props;
100 | const { value, currentSelectPanel } = this.state;
101 | const disabledHourOptions = disabledHours();
102 | const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
103 | const disabledSecondOptions = disabledSeconds(
104 | value ? value.hour() : null,
105 | value ? value.minute() : null
106 | );
107 | const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
108 | const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
109 | const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
110 |
111 | return (
112 |
113 |
133 |
152 |
153 | );
154 | }
155 | }
156 |
157 | export default Panel;
158 |
--------------------------------------------------------------------------------
/src/components/TimePicker/Select.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDom from 'react-dom';
3 | import classnames from 'classnames';
4 | import PropTypes from 'prop-types';
5 |
6 | const scrollTo = (element, to, duration) => {
7 | const requestAnimationFrame =
8 | window.requestAnimationFrame ||
9 | function requestAnimationFrameTimeout() {
10 | return setTimeout(arguments[0], 10);
11 | };
12 | // jump to target if duration zero
13 | if (duration <= 0) {
14 | element.scrollTop = to;
15 | return;
16 | }
17 | const difference = to - element.scrollTop;
18 | const perTick = (difference / duration) * 10;
19 |
20 | requestAnimationFrame(() => {
21 | element.scrollTop += perTick;
22 | if (element.scrollTop === to) return;
23 | scrollTo(element, to, duration - 10);
24 | });
25 | };
26 |
27 | class Select extends React.Component {
28 | static propTypes = {
29 | prefixCls: PropTypes.string,
30 | options: PropTypes.array,
31 | selectedIndex: PropTypes.number,
32 | type: PropTypes.string,
33 | onSelect: PropTypes.func,
34 | onMouseEnter: PropTypes.func
35 | };
36 |
37 | componentDidMount() {
38 | // jump to selected option
39 | this.scrollToSelected(0);
40 | }
41 |
42 | componentDidUpdate(prevProps) {
43 | // smooth scroll to selected option
44 | if (prevProps.selectedIndex !== this.props.selectedIndex) {
45 | this.scrollToSelected(120);
46 | }
47 | }
48 |
49 | onSelect = value => {
50 | const { onSelect, type } = this.props;
51 | this.props.onSelect(type, value);
52 | };
53 |
54 | getOptions = () => {
55 | const { options, selectedIndex, prefixCls } = this.props;
56 | return options.map((item, index) => {
57 | const cls = classnames({
58 | [`${prefixCls}-select-option-selected`]: selectedIndex === index,
59 | [`${prefixCls}-select-option-disabled`]: item.disabled
60 | });
61 | let onclick = null;
62 | if (!item.disabled) {
63 | let value = +item.value;
64 | if (Number.isNaN(value)) {
65 | value = item.value;
66 | }
67 | onclick = this.onSelect.bind(this, value);
68 | }
69 |
70 | return (
71 |
72 | {typeof item.label !== 'undefined' ? item.label : item.value}
73 |
74 | );
75 | });
76 | };
77 |
78 | scrollToSelected = duration => {
79 | // move to selected item
80 | const select = ReactDom.findDOMNode(this);
81 | const list = ReactDom.findDOMNode(this.list);
82 | let index = this.props.selectedIndex;
83 | if (index < 0) {
84 | index = 0;
85 | }
86 | const topOption = list.children[index];
87 | const to = topOption.offsetTop;
88 | scrollTo(select, to, duration);
89 | };
90 |
91 | render() {
92 | if (this.props.options.length === 0) {
93 | return null;
94 | }
95 |
96 | const { prefixCls } = this.props;
97 |
98 | return (
99 |
100 |
{
102 | this.list = inst;
103 | }}
104 | >
105 | {this.getOptions()}
106 |
107 |
88 |
95 |
96 | {years.map((yearItem, key) => {
97 | const buttonFingerprint = `${month.format(monthFormat)}-${years[key]}`;
98 | const isCurrent = Number(year.format(yearFormat)) === years[key];
99 |
100 | const isCurrentYearPosition = Number(year.format(yearFormat)) === years[key];
101 |
102 | const currentYearClass = classnames(styles.yearWrapper, {
103 | [styles.selected]: isCurrent
104 | });
105 |
106 | return (
107 |
108 |
114 |
115 | );
116 | })}
117 |
118 |