title: How to set default text content in React-Bootstrap date input form control?
body: <p>I am building an application with React-Bootstrap and Hooks to pre-populate the form with previously known values.
  However, when the date input is rendered, it shows the placeholder text 'dd/mm/yyyy' <strong>despite the underlying value of the element containing the correct pre-set value</strong>, and hence the Save action if the field is untouched still works correctly.</p>
  <p>The field appears within a Form Group, with the form becoming editable when the button is clicked (switching the button text in the above screenshot from 'Update' to 'Save', and swapping the date field to show the datepicker rather than a text field showing the calculated age):</p>
  <p><a href="https://i.stack.imgur.com/5wGfN.png" rel="nofollow noreferrer">Form when read only</a>
  <a href="https://i.stack.imgur.com/eKtU7.png" rel="nofollow noreferrer">Form when editable</a></p>
  <p>In terms of function, the user is still able to select the date and text in the field is then updated to reflect the date selected as expected, it is just the initial default value which doesn't show. This is frustrating as the users may not need to change this field but it appears to wipe the info if they don't.</p>
  <p>I have tried using different</p>
  <p>Code for the input field:</p>
  <pre><code>//hooks
  const [editable, setEditable] = useState(false);
  const [name, setName] = useState(user.name);
  const [dob, setDob] = useState(user.dob);
  
  //functions called
  export const dateFromDateString = (dateString) =&gt; {
      return moment(new Date(dateString)).format('YYYY-MM-DDT00:00:00.000');
  };
  
  export const dateForPicker = (dateString) =&gt; {
      return moment(new Date(dateString)).format('YYYY-MM-DD')
  };
  
  const calculateAge = (date) =&gt; {
      return moment().diff(date, 'years', false);
  };
  
  //form with irrelevant fields removed
  &lt;Form className=&quot;personalInfo&quot;&gt;
      {editable ?
          &lt;Form.Group as={Row} className=&quot;mb-3 align-items-center&quot; controlId=&quot;dobInput&quot;&gt;
              &lt;Form.Label column lg={4}&gt;Date of Birth:&lt;/Form.Label&gt;
              &lt;Col&gt;
                  &lt;Form.Control type=&quot;date&quot;
                                defaultValue={dateForPicker(dob)}
                                onfocus={dateForPicker(dob)}
                                placeholder={dob ? dateForPicker(dob) : &quot;dd/mm/yyyy&quot;}
                                onChange={(e) =&gt; setDob(dateFromDateString(e.target.value))}
                  /&gt;
              &lt;/Col&gt;
          &lt;/Form.Group&gt;
          :
          &lt;Form.Group as={Row} className=&quot;mb-3 align-items-center&quot; controlId=&quot;ageDisplay&quot;&gt;
              &lt;Form.Label column id=&quot;ageLabel&quot; lg={4}&gt;Age:&lt;/Form.Label&gt;
              &lt;Col&gt;
                  &lt;Form.Control type=&quot;text&quot; readOnly
                                value={calculateAge(dateFromDateString(user.dob))}/&gt;
              &lt;/Col&gt;
          &lt;/Form.Group&gt;
      }
  
  
      &lt;Form.Group as={Row} className=&quot;d-flex justify-content-end&quot; controlId=&quot;nameInput&quot;&gt;
          &lt;Button variant=&quot;outline-dark&quot;
                  size=&quot;sm&quot;
                  className=&quot;w-25 mx-2&quot;
                  id=&quot;profileSubmitBtn&quot;
                  onClick={editable ? saveChanges : () =&gt; toggleEditable(editable, setEditable)}
          &gt;
              {editable ? &quot;Save&quot; : &quot;Update&quot;}
          &lt;/Button&gt;
      &lt;/Form.Group&gt;
  &lt;/Form&gt;
  </code></pre>
  <p>Versions:
  &quot;bootstrap&quot;: &quot;^5.1.3&quot;,
  &quot;react&quot;: &quot;^17.0.2&quot;,
  &quot;react-bootstrap&quot;: &quot;^2.1.0&quot;,</p>