Need to style today's date and selected date differently using react datepicker

I am currently working with the React Datepicker and I am facing an issue where two different styles need to be applied for the current date and a selected date.

Specifically, I have defined a style for the current date as well as a separate style for when a user selects a date.

The problem arises when neither style takes precedence over the other. As a result, when the current date is selected, both colors end up merging together. I am hoping to configure it in a way that when the current date is selected, only the selected date CSS style is applied while ignoring the other style.

https://codesandbox.io/s/blue-bash-32xik?fontsize=14

CSS Styles

.myClassname,
.react-datepicker__day--selected {
  background-color: #1648c3 !important;
}

.myClassname,
.react-datepicker__day--today {
  border: 2px solid
    linear-gradient(
      174deg,
      rgba(255, 165, 0, 0.7357317927170868) 32%,
      rgba(249, 239, 170, 1) 100%
    );
  border-radius: 0.3rem;
  background: linear-gradient(
    174deg,
    rgba(255, 165, 0, 0.7357317927170868) 32%,
    rgba(249, 239, 170, 1) 100%
  );
}
javascriptcssreactjs

Answer №1

The key change that needs to be made is in your selected CSS selector. Rather than specifying the background-color, simply use the background attribute. This will take precedence over the existing background: linear-gradient in the current selector.

myClassname,
.react-datepicker__day--selected {
  background: #1648c3 !important;
}

Answer №2

Building on @aquilesb's response

.react-datepicker__day--keyboard-selected {
  background-color: red !important;
}

This particular styling can be incorporated for ease of use.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you retrieve the current user in express.js when incorporating socket.io?

I have a web app using the express framework and socket.io for real-time chat. I am trying to get the current user's username and create a room with them in it, but I am struggling to retrieve the user info when socket.on('connection') is ca ...

javascriptnode.jssocketsexpresssocket.io

Is it possible to pause and resume animation in React Native?

onAnimation(){ var animation = Animated.timing(this.state.spin,{ toValue:1, duration:4000, easing:Easing.linear }); animation.start(); } onPause(){ this.state.spin.stopAnimation(); } Exploring the world of animati ...

reactjsreact-native

Executing asynchronous JavaScript calls within a loop

I've encountered an issue with asynchronous calls in JavaScript where the function is receiving unexpected values. Take a look at the following pseudo code: i=0; while(i<10){ var obj= {something, i}; getcontent(obj); / ...

javascriptjqueryloopsasynchronous

Merge identical year items into a single entity

I have an array of objects containing car data: [ { year: 2019, company: 'Toyota', quantity: '450' }, { year: 2019, company: 'Ford', quantity: '600' }, { year: 2020, company: ...

javascriptnode.jsarraysjsonecmascript-6

Customizing the Height of Elements in Bootstrap

When working with two columns in bootstrap, let's say one column has a height of 800 PX. If you want the text in the second column to start after 200 PX, is there a way to achieve this without using padding or margin? Are there any predefined classes ...

htmlcssweblayoutbootstrap-4

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...

cssflexbox

Explore one of the elements within a tuple

Can we simplify mapping a tuple element in TypeScript? I'm seeking an elegant way to abstract the following task const arr: [string, string][] = [['a', 'b'], ['c', 'd'], ['e', 'f']] const f ...

javascripttypescript

Revamping array elements in React

Once I added an element to the array, I needed to update this array by doubling all elements except for the one that was just added. Despite trying setArray([]) before retrieving the array from the database, it didn't seem to work... const [array, se ...

javascriptreactjs

What steps are needed to reproduce this unique image download function?

I'm interested in incorporating a feature from my friend's website where users can receive a URL, select images, and easily download them. What is the simplest method for achieving this on my own site? Check out the feature here! ...

reactjshyperlinkdownloadportfolio

What is the best way to send a parameter to the callback function of a jQuery ajax request?

I am facing an issue where I need to pass additional variables to a jQuery ajax callback function. Consider the following scenario: while (K--) { $.get ( "BaseURL" + K, function (zData, K) {ProcessData (zData, K); } ); } func ...

javascriptjqueryajaxcallbackclosures

What is the preferred way to handle return values in a JQuery Ajax function - true or

Just a quick question about my AJAX function - should I include return statements in the code? Here's an example for reference: $.ajax({ type: 'POST', url: 'Application.cfc?method=runProcess', data: {'userID' ...

javascriptjqueryajax

An issue arose when attempting to load the page using jQuery

Currently, I am implementing the slidedeck jquery plugin on my webpage to display slides. While everything is functioning properly, I am facing an issue with the CSS loading process. After these slides, I have an import statement for another page that retr ...

javascriptjquerycssjquery-uijsp

How can I reference a function in a single file component using Vue.js?

Within my Vue.js project, I have crafted a single file component known as Password.vue which comprises two password fields along with their associated validation checks. To begin with, I structure my HTML within the <template></template> tags, ...

javascriptvue.js

What is the correct way to generate a normal map using THREE.js?

Experimenting with the Normal map Ninja demo, I attempted to apply it to a cube in my scene using the most recent version of Three.js from the development branch: // Setting up common material parameters var ambient = 0x050505, diffuse = 0x331100, specul ...

javascriptshaderwebglthree.js

Ways to integrate a security protocol with a graphql resolver

I'm currently diving into the world of graphql and I'm facing a challenge with incorporating an authentication/authorization system into my project. I stumbled upon an example on Medium, but I'm struggling to grasp how a guard connects with ...

javascriptnode.jsreactjsexpressgraphql

Struggling to retrieve the value of a text field in Angular with Typescript

In the Angular UI page, I have two types of requests that I need to fetch and pass to the app.component.ts file in order to make a REST client call through the HTML page. Request 1: Endpoint: (GET call) http://localhost:8081/api/products?productId=7e130 ...

javascriptangulartypescript

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Is there a way to align the line to the right of the text when it's not selected, and have a new line appear on the left side that pushes the text and removes the line on the right side? Here is the design I'm trying to emulate. If you click t ...

htmlcss

Using React and Material-UI to dynamically populate a table with data retrieved from

Material ui table utilizes data in a specific format. rows: [ createData(1, "dashboard", "details"), createData(2, "product", "product details"), ].sort((a, b) => (a.id < b.id ? -1 : 1)) When the API responds with data stored in st ...

javascriptreactjsmaterial-ui

Parent scope receives directive updates with a slight delay

I recently made a transition of my simple paging feature from the controller to a directive, but encountered a peculiar issue. Whenever I update the parent scope from within the directive, the changes only reflect on the next alteration. For instance, if t ...

javascriptangularjs

What steps can be taken to ensure that the onchange event functions properly with radio input

I am facing an issue with my input field as the value changes automatically when an option is selected. However, I want this functionality to also work the same way when a radio input option is selected. How can I modify the code to achieve this? func ...

javascriptjqueryonchange