Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import moment from 'moment';
- // import { formatDateInputs } from '../../utils/helper_functions';
- const formatDateInputs = (value) => {
- let input = value || '';
- input = input.replace(/\D/g, '');
- input = input.substring(0, 8);
- const size = input.length;
- if (size < 3) {
- return input;
- }
- if (size < 5) {
- return `${input.substring(0, 2)}/${input.substring(2, 4)}`;
- }
- if (size < 9) {
- return `${input.substring(0, 2)}/${input.substring(2, 4)}/${input.substring(4)}`;
- }
- };
- class DatePickerCustomInput extends Component {
- constructor(props) {
- super(props);
- this.state = {
- stateValue: '',
- };
- }
- componentWillMount() {
- this.setState({ stateValue: formatDateInputs(this.props.value) });
- }
- componentWillReceiveProps(nextProps) {
- if (nextProps.value) {
- const newValue = formatDateInputs(nextProps.value);
- this.setState({ stateValue: newValue });
- }
- }
- handleRawChange = (e) => {
- const date = e.target.value;
- const newDate = formatDateInputs(date);
- this.setState({ stateValue: newDate });
- if (newDate.length === 10 && moment(newDate, 'MM/DD/YYYY').isValid) {
- this.props.pickerOnChange(moment(newDate, 'MM/DD/YYYY').toISOString());
- }
- };
- render() {
- return (
- <input
- type="text"
- value={this.state.stateValue === 'Invalid date' ? '' : this.state.stateValue}
- onChange={this.handleRawChange}
- onClick={this.props.onClick}
- placeholder="MM/DD/YYYY"
- onBlur={this.props.onBlur}
- disabled={this.props.disabled}
- />
- );
- }
- }
- export default DatePickerCustomInput;
Add Comment
Please, Sign In to add comment