CODEWITHSUNDEEP
cssreactjsdatetimepicker
Biggy Poopa
Biggy Poopa

Reputation: 97

DateTimePicker text color

I am trying to change the color of the text in DateTimePicker component within a table cell.

import DateTimePicker from 'react-datetime-picker';

<td>
      <DateTimePicker onChange={onChange} value={value} textColor="white"/>
</td>

I get the following output.

Is there any other way to change the color of the text? Also the theme of the table is dark.

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {  Table } from 'reactstrap'
import {useState} from 'react'
import DateTimePicker from 'react-datetime-picker';


function App() {


  const [value, onChange] = useState(new Date());

  return (
    <>
  <div>
    <Table dark>
    <thead>
      <tr>
        
        <th></th>
      </tr>
    </thead>
    <tbody>
    <td >
      <DateTimePicker onChange={onChange} value={value} textColor="white"/>
    </td>
    </tbody>
    </Table>
</div>
 </>
 );
}

export default App;

Upvotes: 0

Views: 492

Answers (2)

Exception
Exception

Reputation: 592

we can change the color of the text but we can't change color of SVG image because it is coming from some other place. if we want to change the color of SVG image, we need to store our SVG image in the project.

to change the color of the text

.react-datetime-picker__inputGroup__input {
  color: aliceblue !important;
}

changing the background color for svg image to get good look

.react-datetime-picker__button svg {
  background-color: aliceblue !important;
}

also providing stackblitz example here.

Upvotes: 1

ayush9398
ayush9398

Reputation: 56

I don't see any textColor attribute. You can use calendarClassName and try resolving this using CSS color: white or maybe try using style attribute for adding inline css, not sure if the package is using that internally.

You can refer to npm doc of react-datetime-picker for other attributes which might help.

Upvotes: 0

Related Questions