选择时更改日期的标题格式

时间:2019-08-12 04:39:13

标签: reactjs datetimepicker react-widgets

enter image description here我正在使用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"
/>

1 个答案:

答案 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}
    />
 )
}

}