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

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:

Here is what the form looks like now

htmlcssinputdatepickerreact-bootstrap


Solution 1:[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.

See it now

Solution 2:[2]

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

With left: 15px;

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:

With left: 0;

Solution 3:[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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mplungjan
Solution 2 viking
Solution 3 Kurisubo

Related Questions