与佛教年的Antd Datepicker

Question

摘要：

• 我已经设法将泰国语言环境应用于我的antd datepicker，但该年份的显示是无效的。必须是泰国地区的佛教年（=基督教年 + 543年）。

（请参阅

。 em>我尝试过的内容：

• 我已经阅读了 https://ant.design/components/date-picker/ 修改面板

一些代码：

// App.js
import React from 'react'
import {DatePicker} from 'antd'
import 'moment/locale/th'
import locale from 'antd/lib/locale-provider/th_TH'


function App() {
  return <DatePicker locale={locale}/>
}
  
export default App

Answer 1

我的情况相同，客户希望以CE格式以DB的形式显示佛教年格式。

我最终在DOM中手动转换它们。

这是我的代码

mixins \ calendar.js

import _ from "lodash";

export default {
  data() {
    // debounce 5ms
    this.convertCalendarToBuddhistYear = _.debounce(
      this.convertCalendarToBuddhistYear,
      5
    );

    return {};
  },

  methods: {
    /**
     * Change calendar picker to Buddhist Year format
     */
    convertCalendarToBuddhistYear() {
      if (this.$i18n.locale == "en") return;

      const calendars = document.querySelectorAll(".ant-calendar");

      for (let index = 0; index < calendars.length; index++) {
        const calendar = calendars[index];
        calendar.onclick = (e) => {
          // Append child node for panel header
          this.__appendChildNodeInPanelHeader();

          // Conver year text in calendar panel
          this.__convertYearInPanel();
        };
      }

      this.__appendChildNodeInPanelHeader();
    },

    __appendChildNodeInPanelHeader() {
      const selector = [
        ".ant-calendar-month-panel-year-select-content:not(.be)",
        ".ant-calendar-year-select:not(.be)",
        ".ant-calendar-year-panel-decade-select-content:not(.be)",
        ".ant-calendar-decade-panel-century:not(.be)",
      ].join(",");

      const elements = document.querySelectorAll(selector);

      for (let index2 = 0; index2 < elements.length; index2++) {
        const element = elements[index2];
        const nextElement = element.nextSibling;
        const year = element.innerHTML
          .split("-")
          .map((a) => +a + 543)
          .join("-");

        if (!nextElement?.classList.contains("be")) {
          // Create clone element and chnage text to BE
          const clone = element.cloneNode(true);

          clone.innerHTML = year;
          clone.classList.add("be");
          element.style.display = "none";
          clone.onclick = () => {
            element.click();
          };
          element.after(clone);
        } else {
          // Update clone text BE
          nextElement.innerHTML = year;
        }
      }
    },

    __convertYearInPanel() {
      const selector = [
        ".ant-calendar-year-panel-year:not(.be)",
        ".ant-calendar-decade-panel-decade:not(.be)",
      ].join(",");

      const elements = document.querySelectorAll(selector);

      for (let index = 0; index < elements.length; index++) {
        const element = elements[index];

        const year = element.innerHTML
          .split("-")
          .map((a) => +a + 543)
          .join("-");

        element.innerHTML = year;
        element.classList.add("be");
      }
    },
  },
};

datepicker.vue

<a-date-picker
  :show-time="
    showTime
      ? { format: $i18n.locale === 'en' ? 'hh:mm a' : 'HH:mm a' }
      : false
  "
  @openChange="onOpenChange"
>
</a-date-picker>

methods: {
  onOpenChange(open) {
    if (open) {
      this.convertCalendarToBuddhistYear();
    }
  },
}