diff --git a/README.md b/README.md index f054ae0..4a97f8a 100644 --- a/README.md +++ b/README.md @@ -86,40 +86,3 @@ I'd be happy to accept PRs for that. ## License Copyright (c) 2016 [mberneti](https://twitter.com/mberneti) Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license. - -## Contributors ✨ - -Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): - - - - - - - - - - - - - - - - - - - - - - - - - - -

mohammadreza berneti
💻 🤔 📖 🐛 🎨 💡 🚧 📦 💬 👀 📆
Mohamad Mohebifar
🤔 📖 💻
Ali Akbar Azizi
🚧 📦 💻 🐛 💬
Ali Najafi
🚧 💻
Mehrdad Mehralian
💻 🎨
mojtaba Shayegh
🐛 💻
mory rezaee
🚧 💻

Mathieu Saubin
🚧 💻
alireza molaee
🚧 💻
Ali MoghaddasZadeh
🐛
amir zamani
🚧 📦 💻 🐛 💬
Afsane Fadaei
🚧 💬
Hossein Aghatabar
🐛
Mahdi
💻

Hosein BehkamaL
💻
- - - - - -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/package.json b/package.json index 7cb001b..47c3550 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-datepicker2", - "version": "v3.3.13", + "name": "mopon-react-datepicker2", + "version": "v3.3.14", "description": "react datepicker component. (include persian jalaali calendar)", "main": "dist/umd/index.js", "types": "dist/types/index.d.ts", diff --git a/src/components/CustomTimePicker.js b/src/components/CustomTimePicker.js index a59d18f..ec46e62 100644 --- a/src/components/CustomTimePicker.js +++ b/src/components/CustomTimePicker.js @@ -38,11 +38,11 @@ export default class MyTimePicker extends Component { } render() { - const { momentValue, isGregorian, outsideClickIgnoreClass } = this.props; + const { momentValue, isGregorian, outsideClickIgnoreClass, showAMPM } = this.props; return ( { - this.setState({ isOpen }); - - if (this.props.onOpen) { - this.props.onOpen(isOpen); + + static defaultProps = { + styles: undefined, + calendarContainerProps: {}, + isGregorian: true, + timePicker: true, + showTodayButton: true, + placeholder: '', + name: '', + persianDigits: true, + setTodayOnBlur: true, + disableYearSelector: false, + }; + + constructor(props) { + super(props); + // create a ref to store the textInput DOM element + this.textInput = React.createRef(); + + this.state = { + isOpen: false, + momentValue: this.props.defaultValue || null, + inputValue: this.getValue( + this.props.defaultValue, + this.props.isGregorian, + this.props.timePicker + ), + inputJalaaliFormat: this.props.inputJalaaliFormat || this.getInputFormat(false, this.props.timePicker), + inputFormat: this.props.inputFormat || this.getInputFormat(true, this.props.timePicker), + isGregorian: this.props.isGregorian, + timePicker: this.props.timePicker, + timePickerComponent: this.getTimePickerComponent(), + setTodayOnBlur: this.props.setTodayOnBlur + }; + } + + getTimePickerComponent() { + return this.props.timePicker ? (this.props.custom_timepicker ? this.props.custom_timepicker : MyTimePicker) : undefined + } + + getInputFormat(isGregorian, timePicker) { + if (timePicker) return isGregorian ? 'YYYY/M/D hh:mm A' : 'jYYYY/jM/jD hh:mm A'; + return isGregorian ? 'YYYY/M/D' : 'jYYYY/jM/jD'; + } + + getValue(inputValue, isGregorian, timePicker) { + if (!inputValue) return ''; + let { inputFormat } = this.state; + let { inputJalaaliFormat } = this.state; + if (!inputFormat) inputFormat = this.getInputFormat(isGregorian, timePicker); + if (!inputJalaaliFormat) inputJalaaliFormat = this.getInputFormat(isGregorian, timePicker); + + return isGregorian + ? inputValue.locale('es').format(inputFormat) + : inputValue.locale('fa').format(inputJalaaliFormat); } - }; - UNSAFE_componentWillMount() { - if (this.props.value) { - this.setMomentValue(this.props.value); + setOpen = isOpen => { + this.setState({isOpen}); + + if (this.props.onOpen) { + this.props.onOpen(isOpen); + } + }; + + UNSAFE_componentWillMount() { + if (this.props.value) { + this.setMomentValue(this.props.value); + } } - } - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { + + if ('value' in nextProps) { + if (nextProps.value === null) { + this.setState({ + input: '', + inputValue: '', + momentValue: null + }); + } + else if ((typeof nextProps.value === 'undefined' && typeof this.props.value !== 'undefined') || + (typeof nextProps.value !== 'undefined' && !nextProps.value.isSame(this.props.value)) + ) { + this.setMomentValue(nextProps.value); + } + } + + + if ('isGregorian' in nextProps && nextProps.isGregorian !== this.props.isGregorian) { + const { inputFormat: nextPropsInputFormat } = nextProps; + const { inputJalaaliFormat: nextPropsInputJalaaliFormat } = nextProps; + + this.setState({ + isGregorian: nextProps.isGregorian, + inputValue: this.getValue(nextProps.value, nextProps.isGregorian, nextProps.timePicker), + inputFormat: nextPropsInputFormat || this.state.inputFormat, + inputJalaaliFormat: nextPropsInputJalaaliFormat || this.state.inputJalaaliFormat + }); + } + + if ('timePicker' in nextProps && nextProps.timePicker !== this.props.timePicker) { + this.setState({ + timePicker: nextProps.timePicker, + timePickerComponent: this.getTimePickerComponent() + }); + } + + if ('setTodayOnBlur' in nextProps && nextProps.setTodayOnBlur !== this.props.setTodayOnBlur) { + this.setState({ + setTodayOnBlur: nextProps.setTodayOnBlur, + }); + } + } - if ('value' in nextProps) { - if (nextProps.value === null) { + toggleMode = () => { + const isGregorian = !this.state.isGregorian; + const { inputFormat: nextPropsInputFormat } = this.props; + const { inputJalaaliFormat: nextPropsInputJalaaliFormat } = this.props; this.setState({ - input: '', - inputValue: '', - momentValue: null + isGregorian: isGregorian, + inputValue: this.getValue(this.props.value, isGregorian, this.props.timePicker) }); - } - else if ((typeof nextProps.value === 'undefined' && typeof this.props.value !== 'undefined') || - (typeof nextProps.value !== 'undefined' && !nextProps.value.isSame(this.props.value)) - ) { - this.setMomentValue(nextProps.value); - } - } + }; + + setMomentValue(momentValue) { + const { inputFormat, isGregorian, timePicker } = this.state; + if (this.props.onChange) { + this.props.onChange(momentValue); + } - if ('isGregorian' in nextProps && nextProps.isGregorian !== this.props.isGregorian) { - const { inputFormat: nextPropsInputFormat } = nextProps; - const { inputJalaaliFormat: nextPropsInputJalaaliFormat } = nextProps; + const inputValue = this.getValue(momentValue, isGregorian, timePicker); - this.setState({ - isGregorian: nextProps.isGregorian, - inputValue: this.getValue(nextProps.value, nextProps.isGregorian, nextProps.timePicker), - inputFormat: nextPropsInputFormat || this.state.inputFormat, - inputJalaaliFormat: nextPropsInputJalaaliFormat || this.state.inputJalaaliFormat - }); + this.setState({momentValue, inputValue}); } - if ('timePicker' in nextProps && nextProps.timePicker !== this.props.timePicker) { - this.setState({ - timePicker: nextProps.timePicker, - timePickerComponent: this.props.timePicker ? MyTimePicker : undefined - }); + handleFocus = () => { + this.setOpen(true); + }; + + handleClickOutsideCalendar() { + this.setOpen(false); } - if ('setTodayOnBlur' in nextProps && nextProps.setTodayOnBlur !== this.props.setTodayOnBlur) { - this.setState({ - setTodayOnBlur: nextProps.setTodayOnBlur, - }); + toEnglishDigits(str) { + if (!str) return str; + const regex1 = /[\u0660-\u0669]/g; + const regex2 = /[\u06f0-\u06f9]/g; + return str + .replace(regex1, function (c) { + return c.charCodeAt(0) - 0x0660; + }) + .replace(regex2, function (c) { + return c.charCodeAt(0) - 0x06f0; + }); } - } - - toggleMode = () => { - const isGregorian = !this.state.isGregorian; - const { inputFormat: nextPropsInputFormat } = this.props; - const { inputJalaaliFormat: nextPropsInputJalaaliFormat } = this.props; - this.setState({ - isGregorian: isGregorian, - inputValue: this.getValue(this.props.value, isGregorian, this.props.timePicker) - }); - }; - - setMomentValue(momentValue) { - const { inputFormat, isGregorian, timePicker } = this.state; - - if (this.props.onChange) { - this.props.onChange(momentValue); + + toPersianDigits(str) { + if (!str) return str; + const regex = /[0-9]/g; + const id = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; + return str.replace(regex, function (w) { + return id[+w]; + }); } - const inputValue = this.getValue(momentValue, isGregorian, timePicker); - - this.setState({ momentValue, inputValue }); - } - - handleFocus = () => { - this.setOpen(true); - }; - - handleClickOutsideCalendar() { - this.setOpen(false); - } - - toEnglishDigits(str) { - if (!str) return str; - const regex1 = /[\u0660-\u0669]/g; - const regex2 = /[\u06f0-\u06f9]/g; - return str - .replace(regex1, function (c) { - return c.charCodeAt(0) - 0x0660; - }) - .replace(regex2, function (c) { - return c.charCodeAt(0) - 0x06f0; - }); - } - - toPersianDigits(str) { - if (!str) return str; - const regex = /[0-9]/g; - const id = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; - return str.replace(regex, function (w) { - return id[+w]; - }); - } - - handleSelectDay(selectedDay) { - const { momentValue: oldValue } = this.state; - let momentValue = selectedDay.clone(); - - if (oldValue) { - momentValue = momentValue.set({ - hour: oldValue.hours(), - minute: oldValue.minutes(), - second: oldValue.seconds() - }); + handleSelectDay(selectedDay) { + const { momentValue: oldValue } = this.state; + let momentValue = selectedDay.clone(); + + if (oldValue) { + momentValue = momentValue.set({ + hour: oldValue.hours(), + minute: oldValue.minutes(), + second: oldValue.seconds() + }); + } + this.setOpen(false); + this.setMomentValue(momentValue); } - this.setOpen(false); - this.setMomentValue(momentValue); - } - handleInputChange(event) { - const { inputFormat, inputJalaaliFormat, isGregorian } = this.state; - const inputValue = this.toEnglishDigits(event.target.value); - const currentInputFormat = isGregorian ? inputFormat : inputJalaaliFormat; + handleInputChange(event) { + const { inputFormat, inputJalaaliFormat, isGregorian } = this.state; + const inputValue = this.toEnglishDigits(event.target.value); + const currentInputFormat = isGregorian ? inputFormat : inputJalaaliFormat; - const momentValue = momentJalaali(inputValue, currentInputFormat); + const momentValue = momentJalaali(inputValue, currentInputFormat); - const cursor = event.target.selectionStart; + const cursor = event.target.selectionStart; - if (momentValue.isValid()) { - this.setState({ momentValue }); - } + if (momentValue.isValid()) { + this.setState({momentValue}); + } - this.setState({ inputValue }, () => { - // It cause lose current cursor positon if persian digits is active - // for example it convert 4 to ۴, so the react set cursor position to end of string - if (this.props.persianDigits) this.input.setSelectionRange(cursor, cursor); - }); + this.setState({inputValue}, () => { + // It cause lose current cursor positon if persian digits is active + // for example it convert 4 to ۴, so the react set cursor position to end of string + if (this.props.persianDigits) this.input.setSelectionRange(cursor, cursor); + }); - if (this.props.onInputChange) { - this.props.onInputChange(event); + if (this.props.onInputChange) { + this.props.onInputChange(event); + } } - } - - hanldeBlur(event) { - if (this.props.onChange) { - if (!event.target.value && this.state.setTodayOnBlur === false) - return; - - const { inputFormat, inputJalaaliFormat, isGregorian } = this.state; - const inputValue = this.toEnglishDigits(event.target.value); - const currentInputFormat = isGregorian ? inputFormat : inputJalaaliFormat; - const momentValue = momentJalaali(inputValue, currentInputFormat); - - if (event.target.value && momentValue.isValid()) { - this.props.onChange(this.state.momentValue); - } else if (this.state.setTodayOnBlur === true) { - this.props.onChange(momentJalaali()); - } + + hanldeBlur(event) { + if (this.props.onChange) { + if (!event.target.value && this.state.setTodayOnBlur === false) + return; + + const { inputFormat, inputJalaaliFormat, isGregorian } = this.state; + const inputValue = this.toEnglishDigits(event.target.value); + const currentInputFormat = isGregorian ? inputFormat : inputJalaaliFormat; + const momentValue = momentJalaali(inputValue, currentInputFormat); + + if (event.target.value && momentValue.isValid()) { + this.props.onChange(this.state.momentValue); + } else if (this.state.setTodayOnBlur === true) { + this.props.onChange(momentJalaali()); + } + } } - } - handleInputClick() { - if (!this.props.disabled) { - this.setOpen(true); + handleInputClick() { + if (!this.props.disabled) { + this.setOpen(true); + } } - } - - renderInput = ref => { - const { isOpen, inputValue, isGregorian } = this.state; - - const className = classnames(this.props.className, { - [outsideClickIgnoreClass]: isOpen - }); - - return ( -
- { + + renderInput = ref => { + const { isOpen, inputValue, isGregorian } = this.state; + + const className = classnames(this.props.className, { + [outsideClickIgnoreClass]: isOpen + }); + + return ( +
+ { this.input = inst; }} - onFocus={this.handleFocus.bind(this)} - onBlur={this.hanldeBlur.bind(this)} - onChange={this.handleInputChange.bind(this)} - onClick={this.handleInputClick.bind(this)} - value={ + onFocus={this.handleFocus.bind(this)} + onBlur={this.hanldeBlur.bind(this)} + onChange={this.handleInputChange.bind(this)} + onClick={this.handleInputClick.bind(this)} + value={ isGregorian || !this.props.persianDigits ? inputValue : this.toPersianDigits(inputValue) } - readOnly={this.props.inputReadOnly === true} - disabled={this.props.disabled} - /> -
- ); - }; - - renderCalendar = ref => { - const { momentValue, isGregorian, timePickerComponent: TimePicker } = this.state; - const { - onChange, - min, - max, - defaultYear, - defaultMonth, - styles, - calendarContainerProps, - ranges, - disableYearSelector, - } = this.props; - - return ( -
- +
+ ); + }; + + renderCalendar = ref => { + const { momentValue, isGregorian, timePickerComponent: TimePicker } = this.state; + const { + onChange, + min, + max, + defaultYear, + defaultMonth, + styles, + calendarContainerProps, + ranges, + disableYearSelector, + time_picker_props + } = this.props; + + let timePickerProps = {}; + + if (time_picker_props != undefined && (typeof time_picker_props == typeof {})) { + timePickerProps = time_picker_props; + } + timePickerProps = Object.assign(timePickerProps, { + outsideClickIgnoreClass: outsideClickIgnoreClass, + isGregorian: isGregorian, + min: min, + max: max, + momentValue: momentValue, + setMomentValue: this.setMomentValue.bind(this), + }); + + return ( +
+ + ) : null } - /> -
- ); - }; - - removeDate() { - const { onChange } = this.props; - if (onChange) { - onChange(null); + /> +
+ ); + }; + + removeDate() { + const { onChange } = this.props; + if (onChange) { + onChange(null); + } + this.setState({ + input: '', + inputValue: '', + momentValue: null + }); } - this.setState({ - input: '', - inputValue: '', - momentValue: null - }); - } - - render() { - const { isOpen } = this.state; - - return ( - (this.tether = tether)} - attachment={this.props.tetherAttachment ? this.props.tetherAttachment : 'top center'} - constraints={[ + + render() { + const { isOpen } = this.state; + + return ( + (this.tether = tether)} + attachment={this.props.tetherAttachment ? this.props.tetherAttachment : 'top center'} + constraints={[ { to: 'window', attachment: 'together' } ]} - offset="-10px -10px" - onResize={() => this.tether && this.tether.position()} - /* renderTarget: This is what the item will be tethered to, make sure to attach the ref */ - renderTarget={ref => this.renderInput(ref)} - /* renderElement: If present, this item will be tethered to the the component returned by renderTarget */ - renderElement={ref => isOpen && this.renderCalendar(ref)} - /> - ); - } + offset="-10px -10px" + onResize={() => this.tether && this.tether.position()} + /* renderTarget: This is what the item will be tethered to, make sure to attach the ref */ + renderTarget={ref => this.renderInput(ref)} + /* renderElement: If present, this item will be tethered to the the component returned by renderTarget */ + renderElement={ref => isOpen && this.renderCalendar(ref)} + /> + ); + } }