diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js
index 36473dac8..d94700926 100644
--- a/app/soapbox/components/birthday_input.js
+++ b/app/soapbox/components/birthday_input.js
@@ -6,10 +6,15 @@ import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import 'react-datepicker/dist/react-datepicker.css';
+import IconButton from 'soapbox/components/icon_button';
import { getFeatures } from 'soapbox/utils/features';
const messages = defineMessages({
birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' },
+ previousMonth: { id: 'datepicker.previous_month', defaultMessage: 'Previous month' },
+ nextMonth: { id: 'datepicker.next_month', defaultMessage: 'Next month' },
+ previousYear: { id: 'datepicker.previous_year', defaultMessage: 'Previous year' },
+ nextYear: { id: 'datepicker.next_year', defaultMessage: 'Next year' },
});
const mapStateToProps = state => {
@@ -34,6 +39,63 @@ class EditProfile extends ImmutablePureComponent {
value: PropTypes.instanceOf(Date),
};
+ renderHeader = ({
+ decreaseMonth,
+ increaseMonth,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled,
+ decreaseYear,
+ increaseYear,
+ prevYearButtonDisabled,
+ nextYearButtonDisabled,
+ date,
+ }) => {
+ const { intl } = this.props;
+
+ return (
+
+
+
+ {intl.formatDate(date, { month: 'long' })}
+
+
+
+
+ {intl.formatDate(date, { year: 'numeric' })}
+
+
+
+ );
+ }
+
render() {
const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props;
@@ -59,6 +121,7 @@ class EditProfile extends ImmutablePureComponent {
minDate={new Date('1900-01-01')}
maxDate={maxDate}
required={required}
+ renderCustomHeader={this.renderHeader}
/>
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index 76996ffda..dd74db173 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -33,6 +33,7 @@
.datepicker .react-datepicker {
box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
+ font-family: inherit;
font-size: 12px;
border: 0;
border-radius: 10px;
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 9c46a965f..64ab2fb4d 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -648,19 +648,8 @@ code {
}
.react-datepicker {
- &__navigation {
- display: flex;
- height: 32px;
- width: 32px;
- margin: 0;
- background: none;
- line-height: 24px;
-
- &:hover,
- &:active,
- &:focus {
- background: none;
- }
+ &__header {
+ padding-top: 4px;
}
&__input-container {
@@ -671,6 +660,34 @@ code {
}
}
}
+
+ &__years,
+ &__months {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0 4px;
+ font-size: 16px;
+ }
+
+ &__button {
+ width: 28px;
+ margin: 0;
+ padding: 4px;
+ background: transparent;
+ color: var(--primary-text-color);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: none;
+ }
+
+ .svg-icon {
+ height: 20px;
+ width: 20px;
+ }
+ }
}
}