HTML 5入力タイプの月を変更することができます

Question

最初の3文字のみを使用してMonthを表示する必要があります。また、矢印キーを使用して月を変更するなどの機能も必要になります.Mでの入力は3月にもう一度Mを入力すると5月が選択されます。

質問：HTML5の入力タイプの月を変更して、月の最初の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'));