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

【问题标题】：HTML 5 input type month can be modifiedHTML 5 输入类型月份可以修改
【发布时间】：2016-07-14 05:16:22
【问题描述】：

我有一个要求，我希望仅使用前 3 个字符来显示月份。而且我还想要使用箭头键更改月份和键入 M 会再次显示 March 等功能，键入 M 会像这样选择 May。

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

【问题讨论】：

只有12个月，你可以创建一个选择下拉列表
这将给出我想要输入月份的整个列表，例如没有下拉菜单并且值根据用户输入而变化的情况
你能显示你目前拥有的html吗？
这是整个日期时间选择器。问题是在日期和月份的原始输入中，我不想下拉，我使用的是 HTML 5 的月份类型，但问题是月份字符的变化导致了设计问题。我还要求只显示一个月的前 3 个字符

标签： javascript html validation input

【解决方案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'));

【讨论】：