本功能是基于封装的datetime-input框进行的二次封装,加上上下左右修改日期的功能,只提供一种思路。
前端框架aurelia
formatString | country |
---|---|
MM/DD/YY h:mm A | USA |
DD.MM.YY HH:mm | German |
DD/MM/YY H:mm | Mexico |
DD/MM/YY h:mm A | India |
YY/MM/DD HH:mm | Chinese |
YY/MM/DD HH:mm | Japanese |
formatString为当前浏览器的日期格式,在点击相应的时,分,秒时需返回相关range的字符(selectKey)来进行日期的加减以及range的设置。
将selectKey设置为@bindable, 意思是可以从外部传入组件内部,aurelia自带一个方法可以实时监听@bindable值的变化,使用selectKeyChanged
可以监听。
selectKey默认为formatString[0],意为日期格式的第一个字符。
在selectKey发生变化之后,会重新调用setSelectionByKey
来设置当前range
当前range设置方式为,通过getSelectionRangeByKey
返回的光标start与end位置,调用setSelectionRange
原生方法设置选中range
let [selectStart, selectEnd] = this.getSelectionRangeByKey(selectKey);
调用setSelectionRange
原生方法设置选中range
根据不同的key,以key在formatString第一个出现的位置为start,进行循环,直至遍历到非key的位置结束,为end
返回[start,end]作为range设置范围
由于一般情况下Y/M/D 格式固定,可以通过一个循环传入key决定
小时存在四种情况,h/H/hh/HH,可以归并为一位和两位的情况,一位时timevalue与formatString长度不符,不可以使用循环返回,要单独判断,h之后的m和A也要随着h的长度而单独判断。
decrease
saveCurrentDate
increase
saveCurrentDate
saveCurrentDate
findNearbyKey
return ->newKey -> selectKeyChanged-> resetRange传入selectKey,operation,timeValue
除了selectKey为A时单独判断外(+12,-12),其余为+1,-1(Moment方法)
根据formatString遍历
在不失焦的时候保存当前value
this.selectKey = this.getCurrentSelectionKey(e);
通过点击的位置,