in src/datepicker/styled-components.ts [283:462]
function getDayStyles(code, { colors }): any {
const undefinedDayStyle = {
// @ts-ignore
':before': { content: null },
// @ts-ignore
':after': { content: null },
};
let defaultDayStyle = undefinedDayStyle;
const disabledDateStyle = {
color: colors.calendarForegroundDisabled,
// @ts-ignore
':before': { content: null },
// @ts-ignore
':after': { content: null },
};
const outsideMonthDateStyle = {
color: colors.calendarForegroundDisabled,
':before': {
borderTopStyle: 'none',
borderBottomStyle: 'none',
borderLeftStyle: 'none',
borderRightStyle: 'none',
backgroundColor: 'transparent',
},
':after': {
borderTopLeftRadius: '0%',
borderTopRightRadius: '0%',
borderBottomLeftRadius: '0%',
borderBottomRightRadius: '0%',
borderTopColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: 'transparent',
borderLeftColor: 'transparent',
},
};
const highlightedStyle = {
// @ts-ignore
':before': { content: null },
};
const CODE_DISABLED_INDEX = 1;
if (code && code[CODE_DISABLED_INDEX] === '1') {
defaultDayStyle = disabledDateStyle;
}
// See the ./utils/day-state.js file for the description of all available states
// rdhsrSsDeDpSrHpHrRrLsMeMoM
// '000000000000000'
const dayStateStyle = Object.assign(
{},
// highlighted date
generateDayStyles('001000000000000', {
color: colors.calendarDayForegroundPseudoSelected,
}),
// selected date
generateDayStyles('000100000000000', {
color: colors.calendarDayForegroundSelected,
}),
// selected highlighted date
generateDayStyles('001100000000000', {
color: colors.calendarDayForegroundSelectedHighlighted,
}),
// disabled date
{
'010000000000000': {
color: colors.calendarForegroundDisabled,
':after': { content: null },
},
},
// disabled highlighted date
{
'011000000000000': {
color: colors.calendarForegroundDisabled,
':after': { content: null },
},
},
// date outside of the currently displayed month (when peekNextMonth is true)
generateDayStyles('000000000000001', outsideMonthDateStyle),
// Range Datepicker
// range: highlighted date outside of a selected range
generateDayStyles('101000000000000', highlightedStyle),
generateDayStyles('101010000000000', highlightedStyle),
// range: selected date
generateDayStyles('100100000000000', {
color: colors.calendarDayForegroundSelected,
}),
// range: selected highlighted date
// when single date selected in a range
generateDayStyles('101100000000000', {
color: colors.calendarDayForegroundSelectedHighlighted,
':before': { content: null },
}),
// range: selected start and end dates are the same
generateDayStyles('100111100000000', {
color: colors.calendarDayForegroundSelected,
':before': { content: null },
}),
generateDayStyles('101111100000000', {
color: colors.calendarDayForegroundSelectedHighlighted,
':before': { content: null },
}),
// range: selected start date
generateDayStyles('100111000000000', {
color: colors.calendarDayForegroundSelected,
}),
// range: selected end date
generateDayStyles('100110100000000', {
color: colors.calendarDayForegroundSelected,
':before': { left: null, right: '50%' },
}),
// range: first selected date while a range is highlighted but no second date selected yet
// highlighted range on the right from the selected
generateDayStyles('100100001010000', {
color: colors.calendarDayForegroundSelected,
}),
// highlighted range on the left from the selected
generateDayStyles('100100001001000', {
color: colors.calendarDayForegroundSelected,
':before': { left: null, right: '50%' },
}),
// range: second date in a range that is highlighted but not selected
generateDayStyles('101000001010000', {
':before': { left: null, right: '50%' },
}),
{ '101000001001000': {} },
{ '101000001001100': {} },
{ '101000001001010': {} },
// range: pseudo-selected date
generateDayStyles('100010010000000', {
color: colors.calendarDayForegroundPseudoSelected,
':before': { left: '0', width: '100%' },
':after': { content: null },
}),
// range: pseudo-highlighted date (in a range where only one date is
// selected and second date is highlighted)
{
'101000001100000': {
color: colors.calendarDayForegroundPseudoSelected,
':before': {
left: '0',
width: '100%',
},
':after': {
content: null,
},
},
},
generateDayStyles('100000001100000', {
color: colors.calendarDayForegroundPseudoSelected,
':before': {
left: '0',
width: '100%',
},
':after': {
content: null,
},
}),
// highlighted start date in a range
generateDayStyles('101111000000000', {
color: colors.calendarDayForegroundSelectedHighlighted,
}),
// highlighted end date in a range
generateDayStyles('101110100000000', {
color: colors.calendarDayForegroundSelectedHighlighted,
':before': { left: null, right: '50%' },
}),
// range: pseudo-selected date
generateDayStyles('101010010000000', {
color: colors.calendarDayForegroundPseudoSelectedHighlighted,
':before': { left: '0', width: '100%' },
}),
// Range is true Date outside current month (when peekNextMonth is true)
generateDayStyles('100000000000001', outsideMonthDateStyle),
// peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on right
generateDayStyles('100000001010001', outsideMonthDateStyle),
// peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on left
generateDayStyles('100000001001001', outsideMonthDateStyle),
// peekNextMonth is true, date is outside month, range is selected
generateDayStyles('100010000000001', outsideMonthDateStyle)
);
return dayStateStyle[code] || defaultDayStyle;
}