You’re offline. This is a read only version of the page.
Hi Champions
I have a form with all classic text inputs and fluent date picker, date picket border color is too light, can we make it little strong and dark of the boarder.
Thanks in advance.
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):
Share
Report
All responses (
Answers (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>
If you really need this change then I would suggest replacing the fluent datepicker with a canvas component such as @PowerAddict's Date Picker Control component:
Reusable Revamped Date Picker Control v3 - Power Platform Community (microsoft.com)
It's not possible to do this with the modern Fluent UI datepicker control.
Change thickness of the border and/or the color in the properties
#1
WarrenBelz
98
Most Valuable Professional
#2
MS.Ragavendar
60
#3
stampcoin
48
