Actually you can manipulate the Fluent UI Datepicker e.g. as suggested in this post: https://butenko.pro/2022/09/19/applying-uci-styling-to-a-fluentui-datepicker-component/
Basically you can use the developer tools to find the classes or ids of the elements that you want to manipulate.
A Datepicker I am working on right now looks like this (leaving out some details):
const datePickerStyles: IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles> = {
textField: {
'& input': {
// Normal edit mode colors
color: textColor,
backgroundColor: fillColor,
// Font
fontFamily: fontFamily,
fontSize: `${fontSize}px`,
fontWeight: `${fontWeight}`,
fontStyle: `${fontStyle}`,
},
// Border
'& .ms-TextField-fieldGroup': {
borderWidth: `${borderWidth}px`,
borderStyle: `${borderStyle}`,
borderColor: `${borderColor}`,
borderRadius: `${borderRadius}px`,
overflow: 'hidden',
},
'& .ms-TextField:focus-visible': {
outline: 'none'
},
// Icon
icon: {
iconName: 'BsCalendar2',
},
'& i': {
color: iconColor
},
// Placeholder
'& input::placeholder': {
color: placeHolderColor,
fontFamily: fontFamily,
fontSize: `${fontSize}px`,
fontWeight: `${fontWeight}`,
fontStyle: `${fontStyle}`,
}
}
};
<DatePicker
firstDayOfWeek={DayOfWeek.Monday}
placeholder='- Select date -'
allowTextInput
ariaLabel='Select a date'
strings={defaultDatePickerStrings}
onSelectDate={(date) => handleOnSelectDate(date)}
value={value}
styles={datePickerStyles}
textField={{ iconProps: { iconName: 'BsCalendar2' } }}
// called twice on select date, and once everytime when loosing focus of the box
formatDate={(date) => onFormatDate(date, locale, options)}
parseDateFromString={onParseDateFromString}
></DatePicker>
