当前位置: 首页 > 工具软件 > Bindable.js > 使用案例 >

js是实现键盘设置日期(input)

魏浩广
2023-12-01

本功能是基于封装的datetime-input框进行的二次封装,加上上下左右修改日期的功能,只提供一种思路。

前端框架aurelia

formatString

formatStringcountry
MM/DD/YY h:mm AUSA
DD.MM.YY HH:mmGerman
DD/MM/YY H:mmMexico
DD/MM/YY h:mm AIndia
YY/MM/DD HH:mmChinese
YY/MM/DD HH:mmJapanese

formatString为当前浏览器的日期格式,在点击相应的时,分,秒时需返回相关range的字符(selectKey)来进行日期的加减以及range的设置。

selectKey

将selectKey设置为@bindable, 意思是可以从外部传入组件内部,aurelia自带一个方法可以实时监听@bindable值的变化,使用selectKeyChanged可以监听。

  • 功能:
    • 监听变化
    • 设置range
    • 获取当前key的value
    • 获取当前value的长度
    • 获取当前key的range

selectKey默认为formatString[0],意为日期格式的第一个字符。

selectKeyChanged

在selectKey发生变化之后,会重新调用setSelectionByKey来设置当前range
当前range设置方式为,通过getSelectionRangeByKey返回的光标start与end位置,调用setSelectionRange原生方法设置选中range

setSelectionByKey

let [selectStart, selectEnd] = this.getSelectionRangeByKey(selectKey);
调用setSelectionRange原生方法设置选中range

getSelectionRangeByKey

根据不同的key,以key在formatString第一个出现的位置为start,进行循环,直至遍历到非key的位置结束,为end
返回[start,end]作为range设置范围

由于一般情况下Y/M/D 格式固定,可以通过一个循环传入key决定
小时存在四种情况,h/H/hh/HH,可以归并为一位和两位的情况,一位时timevalue与formatString长度不符,不可以使用循环返回,要单独判断,h之后的m和A也要随着h的长度而单独判断。

onKeyDown

  1. enter
  2. esc/escape
  3. ArrowDown
    decrease
    saveCurrentDate
  4. ArrowUp
    increase
    saveCurrentDate
  5. ArrowRight
    saveCurrentDate
    findNearbyKey return ->newKey -> selectKeyChanged-> resetRange
  6. ArrowLeft

increase/decrease

传入selectKey,operation,timeValue
除了selectKey为A时单独判断外(+12,-12),其余为+1,-1(Moment方法)

findNearbyKey

根据formatString遍历

saveCurrentDate

在不失焦的时候保存当前value

onClick

this.selectKey = this.getCurrentSelectionKey(e);

getCurrentSelectionKey

通过点击的位置,

  • 超过formatString长度selectStart - 1(h情况)
  • selectKey.match(/[^\w]+/),非字母数字下划线情况-1
  • h为一位时H,M,D单独判断(通过判断key的个数,:的位置综合判断)

其他

getInputStringByKey

sum

valueChanged

isWithinLimit

 类似资料: