/**
@Author: YE
@Update: 2018-09-17
@param: format<string>, onInputChange<function>(v:input框内值), handleNext<function>:回车跳转下一个
@Description: 时间手动输入框,其中onInputChange为必传项用来接收input框时间值。
*/
import React, { Component } from 'react';
import { Input, Message, DatePicker } from '@alifd/next';
import { MsgBox } from '@ali/seenew-front';
import moment from 'moment';
import './index.scss';
let selectPosition = 0;
// const Toast = Feedback.toast;
export default class DateInput extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value || props.defaultValue,
oldValue: props.value || props.defaultValue,
visible: false,
};
}
// 判断平年闰年
isLeapYear = (year) => {
let isLeap = false;
if ((year % 100 === 0 && year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0)) {
isLeap = true;
}
return isLeap;
}
handKeyCodeMin = (ele, parts, type) => {
if ([0, 1, 2, 3, 4].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[0] = Number(parts[0]) - 1;
} else {
parts[0] = Number(parts[0]) + 1;
}
const val = `${parts[0]}-${parts[1]}-${parts[2]} ${parts[3]}:${parts[4]}`;
this.setState({
value: val,
oldValue: val,
}, () => {
ele.setSelectionRange(0, 4);
selectPosition = 1;
});
} if ([5, 6, 7].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[1] = Number(parts[1]) - 1;
if (parts[1] < 10 && parts[1] > 0) {
parts[1] = `0${parts[1]}`;
} if (parts[1] < 1) {
parts[1] = 12;
}
} else {
parts[1] = Number(parts[1]) + 1;
if (parts[1] < 10) {
parts[1] = `0${parts[1]}`;
} if (parts[1] > 12) {
parts[1] = '01';
}
}
const val = `${parts[0]}-${parts[1]}-${parts[2]} ${parts[3]}:${parts[4]}`;
this.setState({
value: val,
oldValue: val,
}, () => {
ele.setSelectionRange(5, 7);
selectPosition = 2;
});
} if ([8, 9, 10].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[2] = Number(parts[2]) - 1;
if (parts[2] < 10 && parts[2] > 0) {
parts[2] = `0${parts[2]}`;
} if (parts[2] < 1 && ['01', '03', '05', '07', '08', '10', '12'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = 31;
} if (parts[2] < 1 && ['04', '06', '09', '11'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = 30;
} if (Number(parts[1]) === 2 && this.isLeapYear(parts[0]) && parts[2] < 1) {
parts[2] = 29;
} if (Number(parts[1]) === 2 && !this.isLeapYear(parts[0]) && parts[2] < 1) {
parts[2] = 28;
}
} else {
parts[2] = Number(parts[2]) + 1;
if (parts[2] < 10) {
parts[2] = `0${parts[2]}`;
} if (parts[2] > 30 && ['04', '06', '09', '11'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = '01';
} if (parts[2] > 31 && ['01', '03', '05', '07', '08', '10', '12'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = '01';
} if (Number(parts[1]) === 2 && this.isLeapYear(parts[0]) && parts[2] > 29) {
parts[2] = '01';
} if (Number(parts[1]) === 2 && !this.isLeapYear(parts[0]) && parts[2] > 28) {
parts[2] = '01';
}
}
const val = `${parts[0]}-${parts[1]}-${parts[2]} ${parts[3]}:${parts[4]}`;
this.setState({
value: val,
oldValue: val,
}, () => {
ele.setSelectionRange(8, 10);
selectPosition = 3;
});
} if ([11, 12, 13].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[3] = Number(parts[3]) - 1;
if (parts[3] < 10 && parts[3] >= 0) {
parts[3] = `0${parts[3]}`;
} if (parts[3] < 0) {
parts[3] = '23';
}
} else {
parts[3] = Number(parts[3]) + 1;
if (parts[3] < 10) {
parts[3] = `0${parts[3]}`;
} if (parts[3] > 23) {
parts[3] = '00';
}
}
const val = `${parts[0]}-${parts[1]}-${parts[2]} ${parts[3]}:${parts[4]}`;
this.setState({
value: val,
oldValue: val,
}, () => {
ele.setSelectionRange(11, 13);
selectPosition = 4;
});
} if ([14, 15, 16].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[4] = Number(parts[4]) - 1;
if (parts[4] < 10 && parts[4] >= 0) {
parts[4] = `0${parts[4]}`;
} if (parts[4] < 0) {
parts[4] = '59';
}
} else {
parts[4] = Number(parts[4]) + 1;
if (parts[4] < 10) {
parts[4] = `0${parts[4]}`;
} if (parts[4] > 59) {
parts[4] = '00';
}
}
const val = `${parts[0]}-${parts[1]}-${parts[2]} ${parts[3]}:${parts[4]}`;
this.setState({
value: val,
oldValue: val,
}, () => {
ele.setSelectionRange(14, 16);
selectPosition = 5;
});
}
}
handKeyCode = (ele, parts, type) => {
if ([0, 1, 2, 3, 4].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[0] = Number(parts[0]) - 1;
} else {
parts[0] = Number(parts[0]) + 1;
}
this.setState({
value: parts.join('-'),
oldValue: parts.join('-'),
}, () => { ele.setSelectionRange(0, 4); selectPosition = 1; });
} if ([5, 6, 7].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[1] = Number(parts[1]) - 1;
if (parts[1] < 10 && parts[1] > 0) {
parts[1] = `0${parts[1]}`;
} if (parts[1] < 1) {
parts[1] = 12;
}
} else {
parts[1] = Number(parts[1]) + 1;
if (parts[1] < 10) {
parts[1] = `0${parts[1]}`;
} if (parts[1] > 12) {
parts[1] = '01';
}
}
this.setState({
value: parts.join('-'),
oldValue: parts.join('-'),
}, () => { ele.setSelectionRange(5, 7); selectPosition = 2; });
} if ([8, 9, 10].some(item => item === ele.selectionStart)) {
if (type === 'minus') {
parts[2] = Number(parts[2]) - 1;
if (parts[2] < 10 && parts[2] > 0) {
parts[2] = `0${parts[2]}`;
} if (parts[2] < 1 && ['01', '03', '05', '07', '08', '10', '12'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = 31;
} if (parts[2] < 1 && ['04', '06', '09', '11'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = 30;
} if (Number(parts[1]) === 2 && this.isLeapYear(parts[0]) && parts[2] < 1) {
parts[2] = 29;
} if (Number(parts[1]) === 2 && !this.isLeapYear(parts[0]) && parts[2] < 1) {
parts[2] = 28;
}
} else {
parts[2] = Number(parts[2]) + 1;
if (parts[2] < 10) {
parts[2] = `0${parts[2]}`;
} if (parts[2] > 30 && ['04', '06', '09', '11'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = '01';
} if (parts[2] > 31 && ['01', '03', '05', '07', '08', '10', '12'].some(item => Number(item) === Number(parts[1]))) {
parts[2] = '01';
} if (Number(parts[1]) === 2 && this.isLeapYear(parts[0]) && parts[2] > 29) {
parts[2] = '01';
} if (Number(parts[1]) === 2 && !this.isLeapYear(parts[0]) && parts[2] > 28) {
parts[2] = '01';
}
}
this.setState({
value: parts.join('-'),
oldValue: parts.join('-'),
}, () => { ele.setSelectionRange(8, 10); selectPosition = 3; });
}
}
handleChange = (v, e) => {
const { format } = this.props;
if (v === '') {
this.setState({
value: v,
});
selectPosition = 0;
return;
}
if (format === 'YYYY-MM-DD HH:mm') {
if (selectPosition === 1) {
// v = v.replace(/\D/g, '');
const pis = v.split('-');
if (pis[0].length === 4) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(5, 7);
selectPosition = 2;
} else {
// v = v.replace(/\D/, '');
this.setState({
value: v,
});
}
return;
}
if (selectPosition === 2) {
// v = v.replace(/\D/g, '');
const pis = v.split('-');
if (pis[1].length === 2) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(8, 10);
selectPosition = 3;
}
this.setState({
value: v,
});
return;
}
if (selectPosition === 3) {
// v = v.replace(/\D/g, '');
const d = v.split(' ');
const pis = d[0] ? d[0].split('-') : [];
if (pis[2] && pis[2].length === 2) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(11, 13);
selectPosition = 4;
}
this.setState({
value: v,
});
return;
}
if (selectPosition === 4) {
// v = v.replace(/\D/g, '');
const pis = v.split(' ');
const times = pis[1] ? pis[1].split(':') : [];
if (times[0] && times[0].length === 2) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(14, 16);
selectPosition = 5;
}
this.setState({
value: v,
});
return;
}
if (selectPosition === 5) {
// v = v.replace(/\D/g, '');
// const pis = v.split(' ');
// const times = pis[1] ? pis[1].split(':') : [];
// if (times[1] && times[1].length === 2) {
// this.setState({
// value: v,
// oldValue: /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(`${pis[0]} ${times[0]}:${mins[0]}${mins[1]}`) ? `${pis[0]} ${times[0]}:${mins[0]}${mins[1]}` : this.state.oldValue,
// });
// e.target.setSelectionRange(14, 16);
// selectPosition = 5;
// }
// this.setState({
// value: v,
// });
// return;
const pis = v.split(' ');
const times = pis[1] ? pis[1].split(':') : [];
if (times[1]) {
const mins = times[1].split('');
if (mins[0]) {
mins[0] = mins[0].replace(/[^0-5]/, '');
} if (mins[1]) {
mins[1].replace(/[^0-9]/, '');
}
this.setState({
value: `${pis[0]} ${times[0]}:${mins[0] || ''}${mins[1] || ''}`,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(`${pis[0]} ${times[0]}:${mins[0]}${mins[1]}`) ? `${pis[0]} ${times[0]}:${mins[0]}${mins[1]}` : this.state.oldValue,
});
if (mins.length === 2) {
e.target.setSelectionRange(14, 16);
selectPosition = 5;
}
return;
}
this.setState({
value: v,
});
return;
}
} else {
if (selectPosition === 1) {
// v = v.replace(/\D/g, '');
const pis = v.split('-');
if (pis[0].length === 4) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(5, 7);
selectPosition = 2;
}
this.setState({
value: v,
});
return;
}
if (selectPosition === 2) {
// v = v.replace(/\D/g, '');
const pis = v.split('-');
if (pis[1].length === 2) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(8, 10);
selectPosition = 3;
}
this.setState({
value: v,
});
return;
}
if (selectPosition === 3) {
// v = v.replace(/\D/g, '');
const d = v.split(' ');
const pis = d[0] ? d[0].split('-') : [];
if (pis[2] && pis[2].length === 2) {
this.setState({
value: v,
oldValue: /^[1-9]\d{3}-\d{2}-\d{2}/.test(v) ? v : this.state.oldValue,
});
e.target.setSelectionRange(8, 10);
selectPosition = 4;
}
this.setState({
value: v,
});
return;
}
}
v = v.replace(/\D/g, '');
this.setState({
value: v,
});
const parts = v.split('');
let $time = '';
// yyyy-mm-dd hh:mm
if (parts[0] && !parts[1]) {
$time = `${parts[0]}`;
$time = $time.replace(/[^1-9]/, '');
this.setState({
value: $time,
});
} if (parts[1]) {
$time = `${parts[0] + parts[1]}`;
} if (parts[2]) {
$time = `${parts[0] + parts[1] + parts[2]}`;
} if (parts[3]) {
$time = `${parts[0] + parts[1] + parts[2] + parts[3]}`;
} if (parts[4]) {
// 月份十位数只能输入0-1
const partFour = parts[4].replace(/[^0-1]/, '');
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${partFour}`}`;
this.setState({
value: $time,
});
} if (parts[5]) {
if (parts[4] * 1 === 1 && parts[5] > 2) {
parts[5] = '';
} if (parts[4] * 1 === 0 && parts[5] * 1 === 0) {
parts[5] = '';
}
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}`}`;
this.setState({
value: $time,
});
} if (parts[6]) {
let partSix;
// 2月单独处理
if (parts[4] * 1 === 0 && parts[5] * 1 === 2) {
partSix = parts[6].replace(/[^0-2]/, '');
} else {
// 天数十位数只能输入0-3
partSix = parts[6].replace(/[^0-3]/, '');
}
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}-${partSix}`}`;
this.setState({
value: $time,
});
} if (parts[7]) {
// 天数个位数处理
const yearPart = `${parts[0] + parts[1] + parts[2] + parts[3]}`;
const monthPart = `${parts[4]}${parts[5]}`;
let partSeven = parts[7];
const isOk = this.isLeapYear(yearPart);
if (parts[6] === '0') {
partSeven = parts[7].replace(/[^1-9]/, '');
}
/** 闰年 */
if (isOk && monthPart === '02') {
partSeven = parts[7];
}
/** 平年 */
if (!isOk && monthPart === '02') {
partSeven = parts[7].replace(/[^0-8]/, '');
} if ((monthPart === '01' || monthPart === '03' || monthPart === '05' || monthPart === '07' || monthPart === '08' || monthPart === '10' || monthPart === '12') && parts[6] === '3') {
partSeven = parts[7].replace(/[^0-1]/, '');
} if ((monthPart === '04' || monthPart === '06' || monthPart === '09' || monthPart === '11') && parts[6] === '3') {
partSeven = parts[7].replace(/[1-9]/, '');
}
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}-${parts[6]}${partSeven}`}`;
this.setState({
value: $time,
oldValue: $time,
});
// 带时间
if (format === 'YYYY-MM-DD HH:mm') {
if (parts[8]) {
const partEight = parts[8].replace(/[^0-2]/, '');
$time = ` ${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}-${parts[6]}${parts[7]}`} ${partEight}`;
this.setState({
value: $time,
});
} if (parts[9]) {
let partNine;
if (parts[8] === '2') {
partNine = parts[9].replace(/[^0-3]/, '');
} else {
partNine = parts[9];
}
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}-${parts[6]}${parts[7]}`} ${parts[8]}${partNine}`;
this.setState({
value: $time,
});
} if (parts[10]) {
const partTen = parts[10].replace(/[^0-5]/, '');
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}-${parts[6]}${parts[7]}`} ${parts[8]}${parts[9]}:${partTen}`;
this.setState({
value: $time,
});
} if (parts[11]) {
$time = `${`${parts[0] + parts[1] + parts[2] + parts[3]}-${parts[4]}${parts[5]}-${parts[6]}${parts[7]}`} ${parts[8]}${parts[9]}:${parts[10]}${parts[11]}`;
this.setState({
value: $time,
oldValue: $time,
});
}
}
}
}
handleKeyDown = (e) => {
if (e.keyCode && e.keyCode !== 37 && e.keyCode !== 38 && e.keyCode !== 39 && e.keyCode !== 40) {
return;
}
e.preventDefault();
e.stopPropagation();
const { format } = this.props;
const f = format || 'YYYY-MM-DD';
const ele = e.target;
const val = e.target.value;
if (f === 'YYYY-MM-DD') {
const parts = val.split('-');
if (parts.length !== 3) {
return;
}
if (e.keyCode === 37) {
switch (selectPosition) {
case 1: break;
case 2:
ele.setSelectionRange(0, 4);
selectPosition -= 1;
break;
case 3:
ele.setSelectionRange(5, 7);
selectPosition -= 1;
break;
default: break;
}
} if (e.keyCode === 39) {
switch (selectPosition) {
case 3: break;
case 2:
ele.setSelectionRange(8, 10);
selectPosition += 1;
break;
case 1:
ele.setSelectionRange(5, 7);
selectPosition += 1;
break;
default: break;
}
} if (e.keyCode === 38) {
this.handKeyCode(ele, parts, '');
} if (e.keyCode === 40) {
this.handKeyCode(ele, parts, 'minus');
}
} else {
const arr = val.split(' ')[0].split('-').concat(val.split(' ')[1].split(':'));
if (arr.length !== 5) {
return;
}
if (e.keyCode === 37) {
switch (selectPosition) {
case 1: break;
case 2:
ele.setSelectionRange(0, 4);
selectPosition -= 1;
break;
case 3:
ele.setSelectionRange(5, 7);
selectPosition -= 1;
break;
case 4:
ele.setSelectionRange(8, 10);
selectPosition -= 1;
break;
case 5:
ele.setSelectionRange(11, 13);
selectPosition -= 1;
break;
default: break;
}
} if (e.keyCode === 39) {
switch (selectPosition) {
case 5: break;
case 4:
ele.setSelectionRange(14, 16);
selectPosition += 1;
break;
case 3:
ele.setSelectionRange(11, 13);
selectPosition += 1;
break;
case 2:
ele.setSelectionRange(8, 10);
selectPosition += 1;
break;
case 1:
ele.setSelectionRange(5, 7);
selectPosition += 1;
break;
default: break;
}
} if (e.keyCode === 38) {
this.handKeyCodeMin(ele, arr, '');
} if (e.keyCode === 40) {
this.handKeyCodeMin(ele, arr, 'minus');
}
}
}
handleInputBlur = () => {
selectPosition = 0;
const vals = this.state.value;
const { format, onInputChange } = this.props;
const { oldValue } = this.state;
const reg = format === 'YYYY-MM-DD HH:mm' ? /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/ : /^[1-9]\d{3}-\d{2}-\d{2}/;
if (vals === '') {
if (typeof onInputChange === 'function') onInputChange('');
return;
}
if (!reg.test(vals)) {
this.setState({
value: oldValue,
});
if (typeof onInputChange === 'function') onInputChange(oldValue);
if (!oldValue) {
Message.error('请按照格式输入时间');
}
return;
}
const arr = vals.split(' ');
const sections = arr[0].split('-');
const times = arr[1] ? arr[1].split(':') : [];
if (sections[1] * 1 < 1 || sections[1] > 12) {
sections[1] = '12';
this.setState({
value: sections.join('-'),
oldValue: sections.join('-'),
});
}
if (['01', '03', '05', '07', '08', '10', '12'].some(item => Number(item) === Number(sections[1])) && Number(sections[2]) > 31) {
sections[2] = 31;
this.setState({
value: sections.join('-'),
oldValue: sections.join('-'),
});
}
if (['04', '06', '09', '11'].some(item => Number(item) === Number(sections[1])) && Number(sections[2]) > 30) {
sections[2] = 30;
this.setState({
value: sections.join('-'),
oldValue: sections.join('-'),
});
} if (Number(sections[1]) === 2 && this.isLeapYear(sections[0]) && sections[2] > 29) {
sections[2] = 29;
this.setState({
value: sections.join('-'),
oldValue: sections.join('-'),
});
} if (Number(sections[1]) === 2 && !this.isLeapYear(sections[0]) && sections[2] > 28) {
sections[2] = 28;
this.setState({
value: sections.join('-'),
oldValue: sections.join('-'),
});
} if (times[0] * 1 < 0 || times[0] * 1 > 23) {
times[0] = '00';
this.setState({
value: `${sections.join('-')} ${times[0]}:${times[1]}`,
oldValue: `${sections.join('-')} ${times[0]}:${times[1]}`,
});
} if (times[1] * 1 < 0 || times[1] * 1 > 60) {
times[1] = '00';
this.setState({
value: `${sections.join('-')} ${times[0]}:${times[1]}`,
oldValue: `${sections.join('-')} ${times[0]}:${times[1]}`,
});
} if (format === 'YYYY-MM-DD HH:mm') {
this.setState({
value: `${sections.join('-')} ${times[0]}:${times[1]}`,
oldValue: `${sections.join('-')} ${times[0]}:${times[1]}`,
});
} if (typeof onInputChange === 'function') {
const v = format === 'YYYY-MM-DD HH:mm' ? `${sections.join('-')} ${times[0]}:${times[1]}` : sections.join('-');
onInputChange(v);
}
}
handleInputClick = (e) => {
const { format } = this.props;
const input = e.target;
if (e.target.value === '') {
selectPosition = 0;
return;
}
if (format === 'YYYY-MM-DD HH:mm') {
if ([0, 1, 2, 3, 4].some(item => item === input.selectionStart)) {
selectPosition = 1;
setTimeout(() => {
input.setSelectionRange(0, 4);
});
} if ([5, 6, 7].some(item => item === input.selectionStart)) {
selectPosition = 2;
setTimeout(() => {
input.setSelectionRange(5, 7);
});
} if ([8, 9, 10].some(item => item === input.selectionStart)) {
selectPosition = 3;
setTimeout(() => {
input.setSelectionRange(8, 10);
});
} if ([11, 12, 13].some(item => item === input.selectionStart)) {
selectPosition = 4;
setTimeout(() => {
input.setSelectionRange(11, 13);
});
} if ([14, 15, 16].some(item => item === input.selectionStart)) {
selectPosition = 5;
setTimeout(() => {
input.setSelectionRange(14, 16);
});
}
} else {
if ([0, 1, 2, 3, 4].some(item => item === input.selectionStart)) {
selectPosition = 1;
setTimeout(() => {
input.setSelectionRange(0, 4);
});
} if ([5, 6, 7].some(item => item === input.selectionStart)) {
selectPosition = 2;
setTimeout(() => {
input.setSelectionRange(5, 7);
});
} if ([8, 9, 10].some(item => item === input.selectionStart)) {
selectPosition = 3;
setTimeout(() => {
input.setSelectionRange(8, 10);
});
}
}
}
// 设置input框的值
setValue = (v) => {
this.setState({
value: v,
});
}
componentWillReceiveProps(nextProps) {
// console.log('nextProps=====', nextProps);
if (nextProps.value) {
const reg = nextProps.format === 'YYYY-MM-DD HH:mm' ? /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/ : /^[1-9]\d{3}-\d{2}-\d{2}/;
if (!reg.test(nextProps.value) && nextProps.value && /^[1-9]\d{3}-\d{2}-\d{2}/.test(nextProps.value)) {
this.setState({
value: `${nextProps.value} 00:00`,
oldValue: `${nextProps.value} 00:00`,
});
} else if (!/^[1-9]\d{3}-\d{2}-\d{2}/.test(nextProps.value) && !reg.test(nextProps.value) && nextProps.value) {
this.setState({
value: '',
});
MsgBox.error('时间格式有误！');
} else {
this.setState({
value: nextProps.value,
oldValue: `${nextProps.value}`,
});
}
}
// 新增判斷，若清空則清空掉值
if (nextProps.value === undefined || nextProps.value === '' || nextProps.value === null) {
this.setState({
value: '',
});
}
}
handleViewChange = (v) => {
const { format } = this.props;
const f = format || 'YYYY-MM-DD';
// let val = '';
// if (this.state.value) {
// if (f === 'YYYY-MM-DD HH:mm') {
// val = /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(this.state.value) ? this.state.value : this.state.oldValue;
// } else {
// val = /^[1-9]\d{3}-\d{2}-\d{2}/.test(this.state.value) ? this.state.value : this.state.oldValue;
// }
// }
// console.log(this.state.value);
// // this.handleInputBlur();
// if (typeof this.props.onVisibleChange === 'function') {
// this.props.onVisibleChange(v, val);
// }
this.setState({
visible: v,
// value: val,
// oldValue: val,
}, () => {
if (typeof this.props.onVisibleChange === 'function') {
this.props.onVisibleChange(v, this.state.value);
}
});
if (v) {
if (f === 'YYYY-MM-DD HH:mm' && this.state.value) {
setTimeout(() => {
if (this.myInput) {
this.myInput.focus();
this.myInput.getInputNode().setSelectionRange(14, 16);
}
}, 500);
selectPosition = 5;
} else if (f && this.state.value) {
setTimeout(() => {
if (this.myInput) {
this.myInput.focus();
this.myInput.getInputNode().setSelectionRange(8, 10);
}
}, 500);
selectPosition = 3;
}
} else {
selectPosition = 0;
}
}
handleDateChange = (v) => {
v = v ? moment(v).format(this.props.format || 'YYYY-MM-DD') : '';
this.setState({
value: v,
oldValue: v,
}, () => {
if (typeof this.props.onChange === 'function') {
this.props.onChange(v);
}
if (typeof this.props.onInputChange === 'function') {
this.props.onInputChange(v);
}
});
}
renderInput = () => {
return (
<React.Fragment>
<Input
placeholder={this.props.placeholder}
value={this.state.value}
onChange={(v, e) => this.handleChange(v, e)}
onKeyDown={(e) => {
if (e.keyCode === 13) {
// if (typeof this.props.handleNext === 'function') {
// this.props.handleNext(e);
// }
const f = this.props.format || 'YYYY-MM-DD';
let val = e.target.value;
if (val) {
if (f === 'YYYY-MM-DD HH:mm') {
val = /^[1-9]\d{3}-\d{2}-\d{2}\s\d{2}:\d{2}/.test(val) ? val : this.state.oldValue;
} else {
val = /^[1-9]\d{3}-\d{2}-\d{2}/.test(val) ? val : this.state.oldValue;
}
}
this.setState({
value: val,
}, () => {
this.handleViewChange(false);
this.handleInputBlur();
});
}
return this.handleKeyDown(e);
}}
onBlur={e => this.handleInputBlur(e)}
onClick={e => this.handleInputClick(e)}
style={{ position: 'absolute', top: 6, left: 6, width: 'calc(100% - 12px)' }}
ref={ref => this.myInput = ref}
/>
{this.props.footerRender && typeof this.props.footerRender === 'function' ? this.props.footerRender() : null}
</React.Fragment>
);
}
render() {
return (
<React.Fragment>
{
this.props.onlyInput ?
<Input
{...this.props}
placeholder={this.props.placeholder}
value={this.state.value}
onChange={(v, e) => this.handleChange(v, e)}
onKeyDown={(e) => {
if (e.keyCode === 13) {
if (typeof this.props.handleNext === 'function') {
this.props.handleNext(e);
}
this.setState({
visible: false,
});
}
return this.handleKeyDown(e);
}}
onBlur={e => this.handleInputBlur(e)}
onClick={e => this.handleInputClick(e)}
ref={ref => this.myInput = ref}
/> :
<DatePicker
{...this.props}
onVisibleChange={this.handleViewChange}
footerRender={this.renderInput}
visible={this.state.visible}
value={this.state.value}
onChange={this.handleDateChange}
/>
}
</React.Fragment>
);
}
}
