How to set the icon for the Ant design datepicker before the input selector and not after

Question

How to set the icon with/without pseudo element for ant design, The approach that i have tried is not 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;
}

Expected style above

Current datepicker

So i have kept the border none and only the placeholder is visible as of now plus the default suffix icon is disabled as what i need is more like a prefix icon.

<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>

Answer 1

Try this demo

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;