时间戳

首页 > 解决方案 > 选择时更改日期的标题格式

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

问题描述

在此处输入图像描述我正在使用来自 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"
/>

标签： reactjsdatetimepickerreact-widgets

解决方案

我希望有一些解决方案可以避免使用 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}
    />
 )
}

}

推荐阅读