From 281ecd32671dd94387560534c8f4db284c3fa20a Mon Sep 17 00:00:00 2001 From: Taylor Li Date: Thu, 9 Oct 2025 10:19:11 -0400 Subject: [PATCH 1/3] add navigators --- app-typescript/components/DatePicker.tsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/app-typescript/components/DatePicker.tsx b/app-typescript/components/DatePicker.tsx index 966579e7..dc25849e 100644 --- a/app-typescript/components/DatePicker.tsx +++ b/app-typescript/components/DatePicker.tsx @@ -13,7 +13,13 @@ import {getMonthNames, getWeekdayNames} from '@sourcefabric/common'; import {localization} from '../localization'; import {assertNever} from '../helpers'; -interface IDatePickerBase extends IInputWrapper { +interface NavigatorsDateRange { + showNavigators?: boolean; + minYearRange?: string; + maxYearRange?: string; +} + +interface IDatePickerBase extends IInputWrapper, NavigatorsDateRange { dateFormat: string; // a combination of YYYY, MM, and DD with a custom separator e.g. 'MM/DD/YYYY' // shortcuts can be used to jump to a date relative to today @@ -176,6 +182,17 @@ export class DatePicker extends React.PureComponent { const showClearButton = this.props.required === true ? false : this.props.hideClearButton !== true; + const navigatorsProps = this.props.showNavigators + ? { + monthNavigator: true, + yearNavigator: true, + yearRange: + this.props.minYearRange && this.props.maxYearRange + ? `${this.props.minYearRange}:${this.props.maxYearRange}` + : `1900:${new Date().getFullYear() + 10}`, + } + : {}; + return ( { this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)}); } }} + {...navigatorsProps} /> ); @@ -315,6 +333,9 @@ export class DatePickerISO extends React.PureComponent { label={this.props.label} info={this.props.info} error={this.props.error} + showNavigators={this.props.showNavigators} + minYearRange={this.props.minYearRange} + maxYearRange={this.props.maxYearRange} /> ); } From dab15c079a17271078a81abfab318387ded8bc71 Mon Sep 17 00:00:00 2001 From: Taylor Li Date: Thu, 9 Oct 2025 10:34:13 -0400 Subject: [PATCH 2/3] add styles --- app-typescript/components/DatePicker.tsx | 1 + app/styles/components/_datepicker.scss | 15 +++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 app/styles/components/_datepicker.scss diff --git a/app-typescript/components/DatePicker.tsx b/app-typescript/components/DatePicker.tsx index dc25849e..5eb57a5d 100644 --- a/app-typescript/components/DatePicker.tsx +++ b/app-typescript/components/DatePicker.tsx @@ -190,6 +190,7 @@ export class DatePicker extends React.PureComponent { this.props.minYearRange && this.props.maxYearRange ? `${this.props.minYearRange}:${this.props.maxYearRange}` : `1900:${new Date().getFullYear() + 10}`, + panelClassName: "datepicker-calendar-panel" } : {}; diff --git a/app/styles/components/_datepicker.scss b/app/styles/components/_datepicker.scss new file mode 100644 index 00000000..aea4edf1 --- /dev/null +++ b/app/styles/components/_datepicker.scss @@ -0,0 +1,15 @@ +.datepicker-calendar-panel { + div { + div { + div:nth-child(3) { + flex: 1; + display: flex; + gap: 16px; + + select:nth-of-type(2) { + margin: 0; + } + } + } + } +} From 7fcee36ca621d277893ae651e7a8b671afe636f6 Mon Sep 17 00:00:00 2001 From: Taylor Li Date: Fri, 10 Oct 2025 09:55:46 -0400 Subject: [PATCH 3/3] fix styles, remove showNavigators prop --- app-typescript/components/DatePicker.tsx | 31 ++++++++------------- app/img/chevron-down.svg | 1 + app/styles/components/_datepicker.scss | 15 ---------- app/styles/primereact/_pr-datepicker.scss | 34 ++++++++++++++++++++++- 4 files changed, 46 insertions(+), 35 deletions(-) create mode 100644 app/img/chevron-down.svg delete mode 100644 app/styles/components/_datepicker.scss diff --git a/app-typescript/components/DatePicker.tsx b/app-typescript/components/DatePicker.tsx index 5eb57a5d..5366b659 100644 --- a/app-typescript/components/DatePicker.tsx +++ b/app-typescript/components/DatePicker.tsx @@ -13,13 +13,7 @@ import {getMonthNames, getWeekdayNames} from '@sourcefabric/common'; import {localization} from '../localization'; import {assertNever} from '../helpers'; -interface NavigatorsDateRange { - showNavigators?: boolean; - minYearRange?: string; - maxYearRange?: string; -} - -interface IDatePickerBase extends IInputWrapper, NavigatorsDateRange { +interface IDatePickerBase extends IInputWrapper { dateFormat: string; // a combination of YYYY, MM, and DD with a custom separator e.g. 'MM/DD/YYYY' // shortcuts can be used to jump to a date relative to today @@ -29,6 +23,9 @@ interface IDatePickerBase extends IInputWrapper, NavigatorsDateRange { locale?: {type: 'code-only'; code: string} | {type: 'full'; payload: Omit}; hideClearButton?: boolean; + + minYearRange?: string; + maxYearRange?: string; } interface IDatePicker extends IDatePickerBase { @@ -182,17 +179,14 @@ export class DatePicker extends React.PureComponent { const showClearButton = this.props.required === true ? false : this.props.hideClearButton !== true; - const navigatorsProps = this.props.showNavigators - ? { - monthNavigator: true, - yearNavigator: true, - yearRange: - this.props.minYearRange && this.props.maxYearRange - ? `${this.props.minYearRange}:${this.props.maxYearRange}` - : `1900:${new Date().getFullYear() + 10}`, - panelClassName: "datepicker-calendar-panel" - } - : {}; + const navigatorsProps = { + monthNavigator: true, + yearNavigator: true, + yearRange: + this.props.minYearRange && this.props.maxYearRange + ? `${this.props.minYearRange}:${this.props.maxYearRange}` + : `1900:${new Date().getFullYear() + 10}`, + }; return ( { label={this.props.label} info={this.props.info} error={this.props.error} - showNavigators={this.props.showNavigators} minYearRange={this.props.minYearRange} maxYearRange={this.props.maxYearRange} /> diff --git a/app/img/chevron-down.svg b/app/img/chevron-down.svg new file mode 100644 index 00000000..221a428c --- /dev/null +++ b/app/img/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/styles/components/_datepicker.scss b/app/styles/components/_datepicker.scss deleted file mode 100644 index aea4edf1..00000000 --- a/app/styles/components/_datepicker.scss +++ /dev/null @@ -1,15 +0,0 @@ -.datepicker-calendar-panel { - div { - div { - div:nth-child(3) { - flex: 1; - display: flex; - gap: 16px; - - select:nth-of-type(2) { - margin: 0; - } - } - } - } -} diff --git a/app/styles/primereact/_pr-datepicker.scss b/app/styles/primereact/_pr-datepicker.scss index d29e013f..79c9d7fc 100644 --- a/app/styles/primereact/_pr-datepicker.scss +++ b/app/styles/primereact/_pr-datepicker.scss @@ -9,6 +9,10 @@ line-height: 1; margin: 0 auto; text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: $sd-base-increment; } .p-datepicker-header { @@ -75,14 +79,42 @@ .p-datepicker-year { display: block; text-align: center; + border: none; + appearance: none; + text-align-last: center; + padding: $sd-base-increment; + padding-inline-end: 2rem; + background: url(../img/chevron-down.svg) no-repeat right 0 center; + background-size: 2rem; + transition: all 0.2s ease-out, color 0.1s ease-out; + + &:active { + background-color: hsla(214, 13%, 55%, 0.3); + color: var(--sd-colour-interactive); + } + + &:hover, + &:focus { + cursor: pointer; + background-color: hsla(214, 13%, 55%, 0.2); + } + + &:focus-visible { + background-color: hsla(214, 13%, 55%, 0.2); + box-shadow: $icn-button-focus-box-shadow; + } } .p-datepicker-year { font-weight: 400; - margin-block-start: 4px; color: var(--color-text-light); } +.p-datepicker-month { + text-transform: uppercase; + font-weight: bold; +} + .p-datepicker { td, th { border: 0;