Rounded corner when using DateRangePicker in Bootstrap 5

[DustRaven]

Hi there,

I don't know if that has been discussed already, but when using the DateRangePicker and Bootstrap 5, the second input does nto have rounded corners.

This seems to be an issue with the css-selector "not last child", because the datepicker is added as a div after the input. It also shows in the live example.

Is there a workaround for that?

[mymth]

Thank you for reporting this. I should have been more careful when checking the demo.

You are right. It's caused by this library's inserting picker div element after the input element, which makes the input element no longer the last item of input-group. I guess the reason why this has never been discussed is that people usually have a validation message div after the input and don't encounter this problem.

The least hacky workaround is probably adding a wrapper div around the input-group and attach date range picker to the wrapper with setting the wrapper to the container option.

<div class="date-range">
  <div class="input-group">
    <input type="text" name="range-start" class="form-control">
    <span class="input-group-text">to</span>
    <input type="text" name="range-end" class="form-control">
  </div>
</div>

const elem = document.querySelector('.date-range');
new DateRangePicker(elem, {
  buttonClass: 'btn',
  container: elem,
}); 

https://codepen.io/mymth/pen/ExrLqpq

I don't know about the real solution yet. So, please let me think about what I can do.

[DustRaven]

Right, the validation message is not necessary in my case. You solution looks good, however I solved it by changing the css query that is used by Bootstrap, since I'm using scss anyways. Somethin in the lines of

form-control:last-of-element {
/* set rounded corners */ 
border-radius: 0,$input-border-radius,$input-border-radius,0;
}

I don't remember how exactly I did it, but that worked for me at least 😄 I didn't see the possibility of assinging a container element.

Thank you for the quick reply by the way!