Guide on how to position the icon for the Ant Design datepicker before the input selector rather than after

Looking for a way to set the icon with or without a pseudo element for Ant Design, I've tried a method that isn't working.

.ant-picker-input > input::before {
  content: url('../../public/assets/calendar.svg') !important; 
  margin-right: 8px !important;
}

.ant-picker-input > input::placeholder {
  color: black !important;
  font-family: poppins;
  font-size: medium;
}

https://i.sstatic.net/ELDE8.png This is the expected style.

https://i.sstatic.net/cFvt4.png Currently, this is the appearance of the datepicker.

Currently, the border is disabled and only the placeholder is visible. The default suffix icon is also disabled, as I require a prefix icon instead.

<Space direction="vertical" size={12} className="grid-cols-1">
  <DatePicker format="YYYY-MM-DD HH:mm:ss" disabledDate={disabledDate} disabledTime={disabledDateTime} placeholder="Schedule a Meet" showTime={{ defaultValue: dayjs( "00:00:00", "HH:mm:ss") }} suffixIcon={null} />
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>
</Space>

cssreactjsant-design-pro

Answer №1

For a demonstration of this concept, check out this sandbox example

import React, { useState } from "react";
import "./index.css";
import { DatePicker, Space } from "antd";
import { CalendarOutlined } from "@ant-design/icons";

const App: React.FC = () => {
  const [open, setOpen] = useState(false);
  return (
    <Space direction="horizontal" size={12}>
      <span
        onClick={() => {
          setOpen(true);
        }}
      >
        <CalendarOutlined /> Schedule a call
      </span>
      <DatePicker
        style={{
          visibility: "hidden",
          position: "absolute",
          left: "30px",
          top: "20px",
        }}
        bordered={false}
        open={open}
        onSelect={() => {
          setOpen(false);
        }}
      />
    </Space>
  );
};

export default App;

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

Why isn't my state being updated properly with React's useEffect, useState, setInterval, and setTimeout functions?

const handleClick = () => { if (!activated) { if (inputValue == '') { return } if (!isNodeInGraph(graph, inputValue)) { return } } setActiv ...

javascriptreactjs

Margin not being applied to last element in parent - any ideas why?

Why does the margin of the last element, whether it is a <p> or <h1>, not have any impact? It should be pushing the background of the parent container downwards. .container { background: grey; } h1 { margin-bottom: 3em } p { margin- ...

htmlcss

How to effectively merge DefaultTheme with styled-components in TypeScript?

I am facing an issue with integrating a module developed using styled-components that exports a theme. I want to merge this exported theme with the theme of my application. In my attempt in theme.ts, I have done the following: import { theme as idCheckThe ...

javascriptreactjstypescriptstyled-componentstsx

Trouble retrieving desired data from an array of objects in React Native

I'm having trouble retrieving values from an array of objects in my state. When I try to access the values, it only prints out "[Object Object]". However, when I stored the values in a separate array and used console.log, I was able to see them. Here ...

javascriptarraysreactjsreact-native

Is the z-index useless when the button is positioned behind divs and other elements?

I would like the "Kontakt" button to appear in the top right corner of the page, always on top of everything else. I have tried setting the z-index to z-index: 99999999999 !important;, but it doesn't seem to be working... On desktop, the button displ ...

javascriptjqueryhtmlcss

Switch videos within the video tag as you scroll

I am trying to implement a video tag within a div element on my website. Here is the current code: <div class="phone" align="center"> <div class="phone-inner"> <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo ...

javascriptjqueryhtmlcss

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Utilizing JSONP within a React-Redux web application

I have been encountering the CORS headers problem due to missing headers in my request, so I am considering utilizing JSONP. Does anyone have suggestions or ideas on how to implement JSONP in a react-redux application? Any tips on configuration and usage? ...

reactjshttp-headerscorsjsonp

What steps do I need to take to make my React application connect to my Node/Express API in a production environment? The proxy feature seems to only function

As someone who is relatively new to node/react, I am facing a challenge with my API/express node app and the react app within it. The issue lies in the axios.get commands and other API calls being made by the react app. These calls are meant to be forwarde ...

node.jsreactjsexpressnginx

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

htmlcss

What is the alternative method for importing the browser module in next.js without using dynamic imports?

const MonacoHighlighter = require("monaco-jsx-highlighter"); After encountering a "document not found" error with this import in next.js, I attempted to find an alternative solution. const Highlighter = new MonacoHighlighter(); By directly instantiating ...

reactjsnext.jsserver-side-renderingmonaco-editordynamic-import

Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes? Javascript $( ".refreshstatus" ).click(function(){ $( ".navplayers" ).load('stats.php'); }); CSS .refreshstatus{ font-family:'Noto Sans'; font-w ...

javascriptjqueryhtmlcss

Vibrant diversity in a solitary symbol

I have customized styles to incorporate Fontawesome icons with their brand colors - for instance, the Opera icon appears in red, IE in blue, and Firefox in orange. Chrome, however, presents a unique challenge with its four distinctive colors. I am curious ...

cssfont-awesomefont-awesome-5

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...

javascripthtmljquerycss

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Is it possible to incorporate a static lighting effect overlay using HTML/CSS? My project consists of an HTML5/JS app with a top navigation bar and a series of cards that are transitioned through using swipe gestures. These cards are displayed in gray ove ...

javascripthtmlcss

The infinite loop issue arises when the useEffect is utilizing the useNavigate hook

As I integrate the useNavigate hook within React to guide users to a specific page post-login, an unexpected infinite loop arises. Most sources online recommend utilizing the useNavigate hook inside a useEffect block; however, this method triggers a Warnin ...

javascriptreactjsreact-hooksuse-effect

What is the best method for retrieving text from the aria-label attribute?

Currently, I am delving into the world of web scraping. My goal is to extract the work-life balance rating from the Indeed website. However, the main obstacle I'm encountering is the extraction of text from the aria-label attribute so that I can retri ...

htmlcssseleniumweb-scrapinggetattribute

React-Admin: The <MenuItemLink> component is consistently displayed as 'active' in the interface

I am currently working with the react-admin framework. I recently swapped out the <DashboardMenuItem> component for <MenuItemLink> (overview). Unfortunately, the "overview" tab always appears as if it is active. Does anyone have an idea on h ...

reactjsmaterial-uireact-admin

What is the best way to search for a CSS selector that includes an attribute beginning with the symbol '@'?

Whenever I want to target an element with a click event, I usually use the following jQuery selector: $('div[@click="login()"]') <div @click="login()"> Login </div> However, when I tried this approach, it resulted ...

javascripthtmlcssgoogle-chromeconsole.log

Sharing directories through Webpack module federation involves the process of distributing

Embarking on a new project, I aim to repurpose components from an existing project. While following tutorials helped me share js and react files along with images and media content, I pondered the possibility of sharing my entire component folder without ...

reactjsnode.jswebpack-5micro-frontendwebpack-module-federation