我正在使用react-widgets中的Datetimepicker。我想更改日期单元格的标题,以便将鼠标悬停在日期上时可以看到所需的格式。当前,标题和日历页脚中显示的日期的格式为:"Month Date, Year"
。我需要有"Date Month, Year"
我尝试使用文化财产。我不确定我是否尝试正确。
<DateTimePicker
inputProps={{ component: props => <input {...props} placeholder="Select year" /> }}
dropUp
time={false}
max={new Date()}
onChange={(e) => this.onSelect(e)}
format="DD-MM-YYYY"
culture='en-AU'
editFormat="DD MMM, YYYY"
/>
答案 0 :(得分:0)
我希望能避免使用JQuery的解决方案。现在没有其他解决方案了,我这样做了:
创建了一个自定义日期选择器:
import React, { Component } from "react";
import DateTimePicker from 'react-widgets/lib/DateTimePicker';
import Moment from "moment";
export default class CustomDateTimePicker extends Component {
componentDidMount () {
var datePickerbutton = document.getElementsByClassName('rw-btn-select');
if (datePickerbutton.length) {
var $this = this;
datePickerbutton[0].onclick = () => {
$this.changeTitles();
setTimeout(() => {
document.getElementsByClassName('rw-calendar-btn-right')[0].onclick = $this.changeTitles;
document.getElementsByClassName('rw-calendar-btn-left')[0].onclick = $this.changeTitles;
}, 0);
}
}
}
changeTitles = () => {
setTimeout(()=> {
var primaryBtn = document.querySelectorAll('#createdOn-investigation .rw-calendar-footer .rw-btn-primary');
primaryBtn[0].innerText = Moment(primaryBtn[0].innerText).format('DD MMMM, YYYY');
var dateCells = document.querySelectorAll('#createdOn-investigation .rw-cell');
for (var i=0; i< dateCells.length; i++ ) {
let currCellDate = new Date(dateCells[i].getAttribute('title'));
dateCells[i].setAttribute('title', Moment(currCellDate).format('DD MMMM, YYYY'));
}
}, 0);
};
render() {
return (
<DateTimePicker
{...this.props}
/>
)
}
}