美文网首页
antd DatePicker 为英文时的另类解法

antd DatePicker 为英文时的另类解法

作者: xiabenglakaA | 来源:发表于2021-06-11 09:56 被阅读0次

当DatePicker为英文时,在入口出引入local不生效时的另类解决方案


function App(){
  /**
   * 日期选择器,月份 英文 转中文
   */
  function monthEnglishToChinese() {
    function selector() {
      return document.querySelectorAll('.ant-picker-month-btn');
    }
    Promise.resolve(1).then(() => {
      const monthBtns = selector();
      if (!monthBtns.length) {
        Promise.resolve(1).then(monthEnglishToChinese);
        return;
      }
      monthBtns.forEach((item) => { // esline-disable-line
        const oldHTML = item.innerHTML.trim();
        let newInnerHTML = '';
        switch (oldHTML) {
          case 'Jan':
            newInnerHTML = '1月';
            break;
          case 'Feb':
            newInnerHTML = '2月';
            break;
          case 'Mar':
            newInnerHTML = '3月';
            break;
          case 'Apr':
            newInnerHTML = '4月';
            break;
          case 'May':
            newInnerHTML = '5月';
            break;
          case 'Jun':
            newInnerHTML = '6月';
            break;
          case 'Jul':
            newInnerHTML = '7月';
            break;
          case 'Aug':
            newInnerHTML = '8月';
            break;
          case 'Sept':
            newInnerHTML = '9月';
            break;
          case 'Oct':
            newInnerHTML = '10月';
            break;
          case 'Nov':
            newInnerHTML = '11月';
            break;
          case 'Dec':
            newInnerHTML = '12月';
            break;
          default:
            break;
        }
        if (newInnerHTML) {
          item.innerHTML = newInnerHTML;// eslint-disable-line
        }
      });
    });
  }
  /**
   *
   * @param {boolean} isOpen 日期选择日打开/关闭事件,当打开时,将星期从英文替换成中文
   */
  function onDatePickerChange(isOpen) {
    function selector() {
      return document.querySelectorAll('.ant-picker-content > thead');
    }
    function getthead(nodeList) {
      if (!nodeList.length) {
        Promise.resolve(1).then(() => getthead(selector()));
        return;
      }
      nodeList.forEach((thead) => {
        /* eslint-disable */
        thead.innerHTML = `<tr> 
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
          <th>日</th>
        </tr>`.replace(/\s/g, '');
        /* eslint-enable */
      });
    }
    if (isOpen) {
      getthead(selector());
      monthEnglishToChinese();
    }
  }
  /**
   * 当日期面板发生变化时 将月份 从 英文 转成中文
   */
  function onDatePanelChange() {
    monthEnglishToChinese();
  }
  return (
    <>
      <RangePicker
        allowClear={false}
        onOpenChange={onDatePickerChange}
        onPanelChange={onDatePanelChange}
       />
    </>
  )
}

相关文章

网友评论

      本文标题:antd DatePicker 为英文时的另类解法

      本文链接:https://www.haomeiwen.com/subject/vbmmeltx.html