CDatePicker inside CInputGroup should render correctly like other form elements

[niksajanjic]

This is how basic form elements render inside input group:

Unfortunately, that doesn't work with PRO form elements like CDatePicker:

Basically, we are not applying form-control class to the CDatePicker component and even if we do it wouldn't work out of the box. We could add similar class as form-control to the parent date-picker element but we also need to reset rules:

border: 0;
border-radius: 0;
padding: 0;

Than inside we need to add these rules to the element with date-picker-input-group class:

border-bottom-left-radius: 0;
border-top-left-radius: 0;

Still, there are some differences with variables, where date picker uses it's own variables like -cui-date-picker-border-color, while other form elements use variables like -cui-border-color.

Lastly, this CSS rule:

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback)

might also have to include:

:not(.date-picker)

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions