时间戳

首页 > 解决方案 > React DayPicker 样式占位符

javascript - React DayPicker 样式占位符

问题描述

我正在使用react-day-picker字段（https://react-day-picker.js.org/）。我想定制它。我已经去react-day-picker/lib/style.css玩过颜色、字体大小等。但问题是，我不能改变占位符样式本身！我已经尝试了一切，基本上我想做的是显示“Hello”并制作红色背景而不是YYYY-MD和白色背景。请帮忙。这就是我现在所拥有的： https ://ibb.co/nGgCwJ

我的.js 代码：

import React, {Component} from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

class DateP extends Component {
  constructor(props) {
    super(props);
    this.handleDayChange = this.handleDayChange.bind(this);
    this.state = {
      selectedDay: undefined
    };
  }
  handleDayChange(day) {
      this.setState({ selectedDay: day });
  }
  render() {
    const { selectedDay} = this.state;
    return (
      <div>
        {selectedDay && <h3>Day: {selectedDay.toLocaleDateString()}</h3>}
        {!selectedDay && <h3>Date Picker</h3>}
        <DayPickerInput
          onDayChange={this.handleDayChange}
        />
      </div>
    );
  }
}

export default DateP;

标签： javascriptreactjsdatepicker

解决方案

此外，如果要更改占位符文本（初始日期）的颜色，请使用以下命令：

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

来源：https ://www.w3schools.com/howto/howto_css_placeholder.asp

推荐阅读