How do I change the position of the datepicker/calendar icon in my bootstrap form?

Question

I using react-bootstrap <Form.Control type="date"> and the calendar icon or date picker is automatically set to the right side/end of the form field. I would like to move the calendar icon/date picker to the left/beginning of the form field or so it immediately follows the date. I tried to find the proper node_module to change the CSS code for the calendar icon's position but I cannot find it.

So does anyone know where I should look to alter the CSS or is there a better fix for this?

Here is what the form looks like now:

Answer 1

Are there any style options for the HTML5 Date picker?

I saw this thread and their solutions/suggestions worked for me. My specific solution follows:

1. I created a new css file with the following code --

   input[type="date"]::-webkit-calendar-picker-indicator {
     position: absolute;
     left: 0;
   }
   
   input::-webkit-datetime-edit {
     position: relative;
     left: 15px;
   }
   
   input::-webkit-datetime-edit-fields-wrapper {
     position: relative;
     left: 15px;
   }
   

2. Then I imported it into my form file and it worked.

Answer 2

Following answer of @Cody, it worked, however date value of input box were floating right, out of box like this:

Made a small change in left for edit, which worked perfectly:

input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; }
input::-webkit-datetime-edit { position: relative; left: 0; }
input::-webkit-datetime-edit-fields-wrapper { position: relative; left: 0; }

Here is the look after this change:

Answer 3

I also used the style options found here: Are there any style options for the HTML5 Date picker?

And found this to be the simplest way to position the calendar to left:

input[type="date"] {
   display: flex;
   flex-flow: row-reverse;
   padding: 8px;
   height: auto;
}