How show Text as placeholder for bootstrap date picker

Question

How can you show text instead of a date as a placeholder for a Form Control?

          <Form.Control
            type="date"
            placeholder="Select date"
          />

Which results in:

Expected result:

Im using: https://react-bootstrap.github.io/forms/form-control/

Answer 1

import React, { useState } from "react";
import Container from "react-bootstrap/Container";
import Form from "react-bootstrap/Form";
import "./App.css";

const App = () => {
  const [inputType, setInputType] = useState("text");

  return (
    <Container className="p-3">
      <Form>
        <Form.Control
          type={inputType}
          placeholder="Select date"
          onFocus={() => setInputType("date")}
          onBlur={() => setInputType("text")}
        />
      </Form>
    </Container>
  );
};

export default App;

https://codesandbox.io/s/react-bootstrap-input-type-date-placeholder-st87v0?file=/src/App.js