由于公司项目需要使用React实现时间的天数,小时数,分钟数之间的自动转化,在遇了很多坑后终于解决了问题。
需要实现的功能:当用户在输入小时数的时候,超过24小时就自动转化为相应的天数;当用户在输入分钟数的时候,超过60分钟以上就要自动转化成相应的小时数和天数;且要实现再次输入的叠加(当已经是1天12时,输入61分钟;得到的是1天13时1分钟。以此类推)。
-
先实现天数、小时数、分钟数的转化函数
// 日期转化函数
// 需要实现功能:当在输入了大于等于24小时就转化成相应的天数,当输入了大于等于60分钟就转化成相应的天数和小时数
// 数值范围:天 时 分 都在0~9999 暂时先不考虑天数超越极限的情况
// 先进行分转化,再统一进行小时转化
// 传入的参数分别为 时 分
export default function transformDate(day,hour,min) {
// 用于存放新生成的天 时 分
let newDay = 0;
let newMin = 0;
let newHour = 0;
let arr = []
// 如果小时大于等于60就转化为小时
if(min >= 60) {
newMin = min % 60
newHour = parseInt(min / 60)
} else {
newMin = min
}
// 将得到的小时数加上,进行统一转化
hour = hour + newHour
// 如果天数大于等于24就转化为天数
if(hour >= 24) {
newDay = parseInt(hour / 24) + day
newHour = hour % 24
} else {
newHour = hour
}
arr.push(newDay)
arr.push(newHour)
arr.push(newMin)
// 最后以数组的形式返回
return arr
}
-
将函数导入到需要使用的文件中
使用的是React的ant design中的inputNumber的onChange监听数字的变化回调,onChange获取到当前输入框内的数字后再放入失去焦点onBlur()中进行函数转化,再更新数据到页面上。
以下是部分实现代码:
这一部分是实现监听输入框内的数字回调
const [payDateDay, setPayDateDay] = useState(0);
const [payDateHour, setPayDateHour] = useState(0);
const [payDateMin, setPayDateMin] = useState(0);
const [shipDateDay, setShipDateDay] = useState(0);
const [shipDateHour, setShipDateHour] = useState(0);
const [shipDateMin, setShipDateMin] = useState(0);
const transformPayDay= (payDateDay:number) => {
setPayDateDay(payDateDay)
}
const transformPayHour= (payDateHour:number) => {
setPayDateHour(payDateHour)
}
const transformPayMin= (payDateMin:number) => {
setPayDateMin(payDateMin)
}
const transformShipDay= (shipDateDay:number) => {
setShipDateDay(shipDateDay)
}
const transformShipHour= (shipDateHour:number) => {
setShipDateHour(shipDateHour)
}
const transformShipMin= (shipDateMin:number) => {
setShipDateMin(shipDateMin)
}
这一部分是实现时间转化
{
field: (ctx:any) => {
return (
<AntdForm.Item
name="month"
label='未支付订单'
rules={[{ required: true, message: '未支付订单不能为空' }]}
extra={'#到达设置时间后订单由系统自动关闭,设置都为0默认不关闭'}
>
<InputNumber
min={0}
max={9999}
defaultValue={0}
value={payDateDay}
style={{ width: '25%' }}
onChange={transformPayDay}
/>
<span> 天 </span>
<InputNumber
min={0}
max={9999}
defaultValue={0}
value={payDateHour}
style={{ width: '25%' }}
onChange={transformPayHour}
onBlur={() => {
if(payDateHour >= 24) {
setPayDateDay(TransformDate(payDateDay,payDateHour,payDateMin)[0])
setPayDateHour(TransformDate(payDateDay,payDateHour,payDateMin)[1])
setPayDateMin(TransformDate(payDateDay,payDateHour,payDateMin)[2])
if((payDateDay + (payDateHour / 24)) > 9999) {
alert('天数的取值范围为0~9999!')
}
}
}}
/>
<span> 时 </span>
<InputNumber
min={0}
max={9999}
defaultValue={0}
value={payDateMin}
style={{ width: '25%' }}
onChange={transformPayMin}
onBlur={() => {
if(payDateMin >= 1440) {
setPayDateDay(TransformDate(payDateDay,payDateHour,payDateMin)[0])
setPayDateHour(TransformDate(payDateDay,payDateHour,payDateMin)[1])
} else if(payDateMin >= 60) {
setPayDateHour(TransformDate(payDateDay,payDateHour,payDateMin)[1])
}
if((payDateDay + (payDateHour / 24) + (payDateMin / 1440)) > 9999) {
alert('天数的取值范围为0~9999!')
}
setPayDateMin(TransformDate(payDateDay,payDateHour,payDateMin)[2])
}}
/>
<span>分 后自动关闭订单</span>
</AntdForm.Item>
);
}
},
为什么说遇到了很多坑呢,一开始想的是使用onChange变化回调监听数字变化就能实现功能,可是在使用过程中我发现,在输入的过程中当前输入框内的数字不会发生变化。因为是在鼠标离开输入框的一瞬间,输入框内的数字还是当前数字,所以onChange又进行了一次回调,导致数据进行了叠加。就比如说我输入0天0时120分钟,当输入的是120分钟时会立马出现2时,当光标离开输入框后会出现叠加,变成了0天4时0分。所以这样是不可行的,就想到使用离开光标的方法,这还是要使用到onChange来获取当前数字来实现转化。