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

Disabling trailing slash to false on a single page in Next.js: A step-by-step guide

Hello, I'm a NextJS newbie and I'm having trouble figuring out how to disable the trailing slash on just one page of my NextJS application. Can anyone help me with this? ...

reactjsnext.js

Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Using a searchbox, you can enter words to find pages with the searched-for word in the page description. If the word is found in the description, a link to the page along with the highlighted word will be displayed. However, I am encountering an issue wher ...

jqueryhtmlcss

Omit a certain td element from the querySelectorAll results

Greetings! I am currently working with an HTML table and I need to figure out how to exclude a specific td element from it, but I'm not sure how to go about it. Here's the HTML code: <table id="datatable-responsive" c ...

javascripthtmljavascript-objects

Using Javascript or Jquery, you can submit a form without the need for a button

I'm attempting to submit a form without using a button by invoking a JavaScript function and processing the form with JQUERY/PHP. My goal is for the form to be submitted silently on the backend without causing the page to reload. However, I keep encou ...

javascriptphphtmljqueryajax

The inexplicable failure of Next.js in executing getServerSideProps

Currently, I am in the process of learning NextJS. As part of this journey, I have an API built using Laravel that features an endpoint /api/user. This endpoint is protected with a token and returns a basic user object structured as follows; { "da ...

reactjsnext.js

Implementing Firebase pagination alongside Mui-Datatable pagination and sorting capabilities

I've been trying to implement server-side pagination and filtering for the Mui-Datatable to display my data, but I haven't been successful so far. Here are the snippets of code that I have been working on: One issue that I'm facing is that ...

javascriptreactjsgoogle-cloud-firestorematerial-uimui-datatable

What is the approach taken by NextJS for ensuring the security of pages when attempting to access them directly in the browser

What happens in NextJS when an unauthorized user tries to access secure pages directly in the browser? Currently, I am attempting to view the /dashboard (which is a secure page). The dashboard DOM elements are displaying. Please refer to the screenshot be ...

htmlreactjssecuritydomnext.js

Transform the infoBox into a jQuery dialog modal window

In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively? Below is the code snippet that includes the implementat ...

javascriptjquerycssjquery-uijquery-ui-dialog

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

javascriptjqueryhtmlcss

Why isn't my axios login get request functioning as expected?

I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...

htmlvue.jsaxios

Set YouTube Playlist to start from a random index when embedded

I've been trying to figure out how to set my embedded playlist to start with a random video. Here's what I attempted: <iframe src="https://www.youtube.com/embed/videoseries?list=PLPmj00V6sF0s0k3Homcg1jkP0mLjddPgJ&index=<?php print(ran ...

javascriptphphtmlyoutube

Steps for looping through an array and placing every set of three items into a fresh Div element

Looking to display an array of 100 mobile phone objects, with each group of 3 items in a new div with the class name row. Struggling with creating logic for displaying only 3 items per div using a for-of loop. Here's the desired outcome (JSX): < ...

reactjstwitter-bootstrapiterator

Adjust the z-Index of the list item element

I am attempting to create an effect where, upon clicking an icon, its background (width and height) expands to 100% of the page. However, I am struggling with ensuring that the 'effect' goes underneath the this.element and above everything else. ...

javascriptjqueryhtmlcss

Issue encountered when attempting to utilize renderToString in React.js for server-side rendering with express framework

This is the content of my server/server.js file: import express from "express"; import React from "react"; import ReactDOMServer, { renderToString } from 'react-dom/server'; import App from '../src/App'; const POR ...

reactjsexpressbabeljsserver-side-rendering

Emphasize the content within the table cell

Currently, I am working with an HTML table that is being generated by Java. My goal is to highlight the text within a table cell without changing the background color of the entire cell. I should mention that I am aware of the option to achieve this by ma ...

htmlcss

I can't seem to get the Font Awesome icons to display properly. What could be the issue?

How can I get Fontawesome icons to display properly in the footer? Despite having my CSS and HTML files in the same directory, the icons remain invisible. Additionally, the page seems to be loading slower than usual. I have provided all necessary informati ...

htmlcssfrontendfont-awesome

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

The jQuery Show Hide feature is experiencing issues specifically on Internet Explorer

Everything looks good in Firefox and Chrome, but unfortunately it's malfunctioning in IE. Does anyone have a suggestion for hiding select Dropdown options? I attempted using CSS with display: none but it didn't work. $j("#id option[value=&apos ...

javascriptjquerycss

Tips for adjusting row height in a fluid table design using div elements

I'm having trouble making a responsive table (a keyboard) where only the cells are resizing instead of the whole keyboard fitting on the screen without any scrolling required. Here is the code I have so far: https://jsfiddle.net/723ar2f5/2/embedded/r ...

htmlcssresponsive-design

"Facing an issue with Rainbow-me React Native chart where the Path is not visible

I've been using the @rainbow-me/animated-charts library for creating simple charts, but it seems like the line path is not displaying properly. I took the code snippet below from their NPM github repository, but all I see is a black box (I assume it& ...

iosreactjsreact-nativereact-native-chart-kit