時間組件

/**

?@Author:?YE

?@Update:?2018-09-17

?@param:?format<string>,?onInputChange<function>(v:input框內(nèi)值),?handleNext<function>:回車跳轉(zhuǎn)下一個

?@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])?{

??????//?月份十位數(shù)只能輸入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?{

????????//?天數(shù)十位數(shù)只能輸入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])?{

??????//?天數(shù)個位數(shù)處理

??????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>

????);

??}

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容