Updated members filter datepicker error messages

no issue

- shortened invalid date format error message in `<GhDatePicker>` to "Date must be YYYY-MM-DD" so it's less likely to wrap
- added `@maxDateError` and `@minDateError` arguments to `<GhDatePicker>` allowing override of the default "Must be on or before xxxx-xx-xx" message shown when the inputted date is outside of the allowed range
- updated `<GhDatePicker>` usage in the "Created" member filter to use "Must be in the past" error message when a future date is selected

ghost/admin/app/components/gh-date-picker.js

@@ -39,7 +39,7 @@ export default class GhDatePicker extends Component {
         this.error = null;
 
         if (!dateStr.match(/^\d\d\d\d-\d\d-\d\d$/)) {
-            this.error = `Invalid date format, must be ${this.dateFormat}`;
+            this.error = `Date must be ${this.dateFormat}`;
             this.args.onError?.(new DateError({
                 message: this.error,
                 date: dateStr
@@ -59,7 +59,8 @@ export default class GhDatePicker extends Component {
         }
 
         if (this.args.minDate && mDate.isBefore(moment(this.args.minDate))) {
-            this.error = `Must be on or after ${moment(this.args.minDate).format(this.dateFormat)}`;
+            this.error = this.args.minDateError || `Must be on or after ${moment(this.args.minDate).format(this.dateFormat)}`;
+
             this.args.onError?.(new DateError({
                 message: this.error,
                 date: dateStr
@@ -68,7 +69,7 @@ export default class GhDatePicker extends Component {
         }
 
         if (this.args.maxDate && mDate.isAfter(moment(this.args.maxDate))) {
-            this.error = `Must be on or before ${moment(this.args.maxDate).format(this.dateFormat)}`;
+            this.error = this.args.maxDateError || `Must be on or before ${moment(this.args.maxDate).format(this.dateFormat)}`;
             this.args.onError?.(new DateError({
                 message: this.error,
                 date: dateStr

ghost/admin/app/components/members/filter-value.hbs

@@ -51,6 +51,7 @@
     <GhDatePicker
         @value={{@filter.value}}
         @maxDate={{now}}
+        @maxDateError="Must be in the past"
         @onChange={{fn @setFilterValue @filter.type @filter.id}}
         data-test-input="members-filter-value"
     />

ghost/admin/tests/integration/components/gh-date-picker-test.js

@@ -213,12 +213,12 @@ describe('Integration: Component: gh-date-picker', function () {
         await fillIn('[data-test-date-picker-input]', 'narp');
         await blur('[data-test-date-picker-input]');
 
-        expect(find('[data-test-date-picker-error]')).to.contain.text('Invalid date format');
+        expect(find('[data-test-date-picker-error]')).to.contain.text('Date must be YYYY-MM-DD');
 
         expect(changeSpy.callCount, '@onChange call count').to.equal(0);
         expect(errorSpy.callCount, '@onError call count').to.equal(1);
         expect(errorSpy.firstCall.args[0]).to.be.instanceof(Error);
-        expect(errorSpy.firstCall.args[0].message).to.contain('Invalid date format');
+        expect(errorSpy.firstCall.args[0].message).to.contain('Date must be YYYY-MM-DD');
     });
 
     it('clears error on internal change to valid', async function () {
@@ -294,6 +294,18 @@ describe('Integration: Component: gh-date-picker', function () {
             expect(errorSpy.firstCall.args[0].date).to.be.equal('2022-02-10');
         });
 
+        it('allows for min date error override', async function () {
+            this.set('date', moment('2022-02-22 22:22:22.000Z')).toDate();
+            this.set('minDate', moment('2022-02-11 12:00:00.000Z').toDate());
+
+            await render(hbs`<GhDatePicker @value={{this.date}} @minDate={{this.minDate}} @minDateError="Must be in the future" @onChange={{this.onChange}} />`);
+
+            await fillIn('[data-test-date-picker-input]', '2022-02-10');
+            await blur('[data-test-date-picker-input]');
+
+            expect(find('[data-test-date-picker-error]')).to.have.text('Must be in the future');
+        });
+
         it('errors when date input is later than max', async function () {
             this.set('date', moment('2022-02-22 22:22:22.000Z')).toDate();
             this.set('maxDate', moment('2022-02-25 12:00:00.000Z').toDate());
@@ -316,5 +328,17 @@ describe('Integration: Component: gh-date-picker', function () {
             expect(errorSpy.firstCall.args[0].message).to.equal('Must be on or before 2022-02-25');
             expect(errorSpy.firstCall.args[0].date).to.be.equal('2022-02-28');
         });
+
+        it('allows for max date error override', async function () {
+            this.set('date', moment('2022-02-22 22:22:22.000Z')).toDate();
+            this.set('maxDate', moment('2022-02-25 12:00:00.000Z').toDate());
+
+            await render(hbs`<GhDatePicker @value={{this.date}} @maxDate={{this.maxDate}} @maxDateError="Must be in the past" @onChange={{this.onChange}} />`);
+
+            await fillIn('[data-test-date-picker-input]', '2022-02-28');
+            await blur('[data-test-date-picker-input]');
+
+            expect(find('[data-test-date-picker-error]')).to.have.text('Must be in the past');
+        });
     });
 });