時(shí)間組件

/**

?@Author:?YE

?@Update:?2018-09-17

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

?@Description:?時(shí)間手動(dòng)輸入框,其中onInputChange為必傳項(xiàng)用來接收input框時(shí)間值嗅骄。

?*/

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月單獨(dú)處理

??????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ù)個(gè)位數(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,

??????});

??????//?帶時(shí)間

??????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('請按照格式輸入時(shí)間');

??????}

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

????????});

??????}

????}

??}

??//?設(shè)置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('時(shí)間格式有誤凄敢！');

??????}?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)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市购桑，隨后出現(xiàn)的幾起案子畅铭，更是在濱河造成了極大的恐慌，老刑警劉巖勃蜘，帶你破解...
    沈念sama閱讀 219,427評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件硕噩，死亡現(xiàn)場離奇詭異，居然都是意外死亡缭贡，警方通過查閱死者的電腦和手機(jī)炉擅，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來阳惹，“玉大人谍失，你說我怎么就攤上這事∮ㄌ溃” “怎么了快鱼？”我有些...
    開封第一講書人閱讀 165,747評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我攒巍，道長，這世上最難降的妖魔是什么荒勇？ 我笑而不...
    開封第一講書人閱讀 58,939評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任柒莉，我火速辦了婚禮，結(jié)果婚禮上沽翔，老公的妹妹穿的比我還像新娘兢孝。我一直安慰自己，他們只是感情好仅偎，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布跨蟹。 她就那樣靜靜地躺著，像睡著了一般橘沥。 火紅的嫁衣襯著肌膚如雪窗轩。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,737評論 1贊 305
  • 城市分裂傳說
    那天座咆，我揣著相機(jī)與錄音痢艺，去河邊找鬼。 笑死介陶，一個(gè)胖子當(dāng)著我的面吹牛堤舒，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播哺呜，決...
    沈念sama閱讀 40,448評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼舌缤，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了某残？” 一聲冷哼從身側(cè)響起国撵，我...
    開封第一講書人閱讀 39,352評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎驾锰，沒想到半個(gè)月后卸留，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,834評論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡椭豫，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年耻瑟，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赏酥。...
    茶點(diǎn)故事閱讀 40,133評論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡喳整，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出裸扶，到底是詐尸還是另有隱情框都，我是刑警寧澤，帶...
    沈念sama閱讀 35,815評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布呵晨，位于F島的核電站魏保，受9級(jí)特大地震影響熬尺，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谓罗，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一粱哼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧檩咱，春花似錦揭措、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0贊 22
  • 一樁弒父案绊含，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炊汹，卻和暖如春躬充，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背讨便。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工麻裳， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人器钟。 一個(gè)月前我還...
    沈念sama閱讀 48,398評論 3贊 373
  • 代替公主和親
    正文 我出身青樓津坑，卻偏偏與公主長得像，于是被迫代替她去往敵國和親傲霸。 傳聞我的和親對象是個(gè)殘疾皇子疆瑰，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2贊 355

推薦閱讀更多精彩內(nèi)容