Adjust the position of the icon in the Mui DatePicker widget

How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code:

 <ThemeProvider theme={calendarTheme}>
        <DatePicker
          disabled={false}
          leftArrowButtonText={t("notification.previous_month")}
          rightArrowButtonText={t("notification.next_month")}
          minDate={today}
          InputProps={{
            classes: { notchedOutline: classes.noBorder },
        
          }}
          components={{
            OpenPickerIcon: Table,
            SwitchViewIcon: ArrowDown,
          }}
          value={value}
          onChange={handlechange}
          renderInput={(params: any) => (
            <TextField
              style={{
                color: "red",
              }}
              {...params}
            />
          )}
        />
      </ThemeProvider>

https://i.stack.imgur.com/IQh4u.png

htmlcssreactjsmaterial-uiicons

Answer №1

To customize the appearance of the DatePicker, assign a class with the specified style:

const styles = {
  root: {
    "flex-direction": "row-reverse"
  }
};

Next, include it in the DatePicker:

<DatePicker
            keyboard
            placeholder="MM/DD/YYYY"
            format={"MM/DD/YYYY"}
            InputProps={{
              classes: { root: classes.root }
            }}
            value={this.state.selectedDate}
            onChange={this.handleDateChange}
            disableOpenOnEnter
            animateYearScrolling={false}
            autoOk={true}
            clearable
            onInputChange={(e) => console.log("Keyboard:", e.target.value)}
          />

https://codesandbox.io/s/material-ui-date-picker-forked-k8v5e?fontsize=14&hidenavigation=1&theme=dark

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

Can you explain the purpose of the charset attribute in HTML and why it is not supported in HTML5?

Being new to the programming realm, I've been diving into basic concepts and have hit a roadblock with the charset attribute in HTML. Can anyone lend a hand in unraveling this mystery for me? ...

html

Is there a way to make Chrome ask to save a password within an HTML form?

I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...

html

"Placing an image at the bottom within a DIV container in HTML

My goal is to neatly align a group of images at the bottom of a fixed-height div. The images all have the same height and width, making the alignment easier. Here is the current structure of my code: <div id="randomContainer"> <div id="image ...

htmlcssimagealignmentspacing

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

Error: The identifier 'socket' has already been declared in the client file and is causing a SyntaxError

Recently, I've developed a React application that leverages socket.io to establish a connection with the Google Cloud Platform. However, upon running both the client and server components, an error is encountered in the client file: Uncaught SyntaxEr ...

reactjsexpresssocket.iogoogle-cloud-platform

JSOUP is cleverly filtering out specific tags while navigating through the HTML tree

While attempting to navigate the HTML tree of a Wikipedia page, I noticed that certain blocks of HTML elements in the code are being omitted. Is there a way to prevent these omissions? CODE Document doc = Jsoup.connect(url).timeout(10000).userAgent(USER_ ...

javahtmlweb-scrapingjsoup

Issue with ForwardRef component in Jest for React Native testing

When attempting to write a test case for my Post Detail screen, I encountered an error that stated: error occurred in the <ForwardRef> component: Here is my test class code: import React from "react"; import { NewPostScreenTemplate } from ...

javascriptreactjsreact-nativejestjsreact-forwardref

Issue: The SupabaseClient.auth.getSession function is not recognized as a valid function, causing an error when using Supabase with Next

I am currently utilizing the Supabase auth helper package for my project, integrating it with React and Next. Upon starting the page, an error message immediately pops up indicating that I have not called the supabaseClient.auth.getSession() method. This h ...

reactjsnext.jsserver-side-renderingsupabase

Having trouble with create-react-app on android home screen launch

Recently, I developed an app using react material-ui and react-router v4 with featherjs serving as the backend. Interestingly, when I access the app from my web browser, the data loads and displays perfectly. However, if I add it to my smartphone's ho ...

androidreactjsmaterial-uicreate-react-appreact-router-v4

Providing parameters to a dynamic component within NextJS

I am dynamically importing a map component using Next.js and I need to pass data to it through props. const MapWithNoSSR = dynamic(() => import("../Map"), { ssr: false, loading: () => <p>...</p>, }); Can anyone sugges ...

javascriptreactjsnext.js

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

What are the steps to utilize the feature of "nprogress"?

After successfully installing npm install nprogress in my project, I encountered an issue when trying to refresh the page - the console displayed the following message: hot-dev-client.js:182 [Fast Refresh] done hot-dev-client.js:196 [Fast Refresh] rebuildi ...

javascriptreactjsnext.js

What is the best method for invoking hook calls within React class-based components?

Is it possible to use functions such as useMediaQuery in class-based components? If so, how can this be achieved? import React from 'react'; import clsx from 'clsx'; import { withStyles ,withTheme ,withMediaQuery } from '@material ...

reactjsmaterial-ui

Retrieving pals from the API and showcasing them on the user interface

Currently, I am working on a project involving a unique Chat Application. While progressing with the development, I encountered an issue related to fetching friends data from the backend (node). Even though I can successfully retrieve the friends data in ...

javascriptnode.jsreactjsmongodbexpress

Guide on merging the root route with child routes using react router v6

When a user visits "/", I want it to automatically redirect them to "/todo", but this functionality is not working as expected. let router = createBrowserRouter([ { path: "/", element: <Layout />, children: ...

javascriptreactjsreact-router-dom

Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...

jqueryhtmlcss

Utilizing Typescript and Jest to prevent type errors in mocked functions

When looking to simulate external modules with Jest, the jest.mock() method can be utilized to automatically mock functions within a module. After this, we have the ability to modify and analyze the mocked functions on our simulated module as needed. As ...

node.jsreactjstypescriptmockingjestjs

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

javascriptjqueryhtmlcss

Unable to invoke a custom hook within another custom hook in a React application

I've developed a React application using create-react-app. Currently, I'm working on creating a custom hook that integrates with the Microsoft Authentication Library (MSAL). MSAL provides a custom React hook that I want to utilize within my own ...

javascriptreactjsreact-hooksazure-ad-msal

Issues with select options not functioning correctly in knockout framework

Currently, I am engaged in a project where data is being retrieved from an API. The main task at hand is to create a dropdown list using select binding. In order to do so, I have defined an observable object to hold the selected value within my data model. ...

javascriptjqueryhtmljsonknockout.js