当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}
/>
</>
)
}
网友评论