Change the text color of the days in the previous and following months inside the RangePicker component

If you are using the RangePicker component in TypeScript and want to change the text color of the days in the previous and following months, you can do so by applying custom styles to the component.

Here are two solutions to achieve this:

Solution 1: Using CSS

You can use CSS to target the days in the previous and following months and change their text color. Here’s an example:


.range-picker {
  /* Your RangePicker styles */
}

.range-picker .ant-calendar-prev-month,
.range-picker .ant-calendar-next-month {
  color: red; /* Change the text color to your desired color */
}

In the above code, we are targeting the previous and following month’s days using the .ant-calendar-prev-month and .ant-calendar-next-month classes respectively. You can replace red with your desired color.

Solution 2: Using JavaScript

If you prefer to use JavaScript to change the text color, you can do so by accessing the RangePicker component and manipulating its DOM. Here’s an example:


const rangePicker = document.querySelector('.range-picker');

const prevMonthDays = rangePicker.querySelectorAll('.ant-calendar-prev-month');
const nextMonthDays = rangePicker.querySelectorAll('.ant-calendar-next-month');

prevMonthDays.forEach(day => {
  day.style.color = 'blue'; /* Change the text color to your desired color */
});

nextMonthDays.forEach(day => {
  day.style.color = 'green'; /* Change the text color to your desired color */
});

In the above code, we are using JavaScript to select the RangePicker component using its class name. Then, we are selecting the days in the previous and following months using the .ant-calendar-prev-month and .ant-calendar-next-month classes respectively. Finally, we are changing the text color of these days by manipulating their style.color property.

By using either of these solutions, you can easily change the text color of the days in the previous and following months inside the RangePicker component in TypeScript.

Remember to replace the color values with your desired colors to achieve the desired result.

Change the text color of the days in the previous and following months inside the RangePicker component