Question

我有一个要求，我想在仅使用前3个字符时显示Month。而且我还想要使用箭头键更改月份以及键入M的功能将再次显示3月打字M会选择May就像那样。

所以问题是我可以修改HTML 5输入类型月份以仅显示月份的前3个字符，或者是否有一些其他元素可以修改为以这种方式运行？

Answer 1

我找不到一些HTML 5元素来执行此操作。所以我用这些功能创建了我的这个小组件。

https://codepen.io/anuprai11894/pen/WxdNYv

class Month extends React.Component {
  constructor(props){
    super(props);
    this.monthArray=['Jan','Feb', 'Mar','Apr', 'May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    this.state=({selectedMonth:this.monthArray[props.month]||0});
  };

  searchAndChangeMonth=(key)=>{
    const _key=key.toLowerCase();
    let k = _.findIndex(this.monthArray,(month,index)=>(index>this.state.selectedMonth && _key===month[0].toLowerCase()));

    if(k===-1){
         k = _.findIndex(this.monthArray,(month)=>( _key===month[0].toLowerCase()));
    }
    if(k===-1 || k===this.state.selectedMonth){
       return;
     }
     this.setState({selectedMonth:k});
  };

  changeMonth=(value)=>{
    const  index=this.state.selectedMonth,
          newMonth=index+value,
          maxIndex=this.monthArray.length;
    if(newMonth > maxIndex){
        this.setState({selectedMonth:0});
    }else if(newMonth < 0){
        this.setState({selectedMonth:11});
    }else {
         this.setState({selectedMonth:newMonth});      
    }
  };
  onValueChange=(event)=>{
    const keyCode=event.keyCode; 
    if(keyCode===40 || keyCode===38){
      this.changeMonth(keyCode-39);
    }else {
        this.searchAndChangeMonth(event.key);
      }
 };
  render() {
    return (<input  onKeyDown={this.onValueChange}
              value={this.monthArray[this.state.selectedMonth]} />);
  }
}


React.render(<Month />, document.getElementById('app'));

可以修改HTML 5输入类型月份

1 个答案: