diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts index b3b7f1c6..ec1ab404 100644 --- a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts +++ b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts @@ -192,6 +192,19 @@ describe('InternalDateControl', () => { expect(field).to.have.property('value', '2020-01-01'); }); + it('supports special value of 0000-00-00', async () => { + const layout = html``; + const control = await fixture(layout); + const field = control.renderRoot.querySelector('vaadin-date-picker')!; + + expect(field).to.have.property('value', ''); + + control.testValue = '0000-00-00'; + await control.requestUpdate(); + + expect(field).to.have.property('value', ''); + }); + it('sets long ISO "value" on vaadin-date-picker from "_value" on itself', async () => { const layout = html``; const control = await fixture(layout); diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.ts b/src/elements/internal/InternalDateControl/InternalDateControl.ts index 5009ab01..9e1117c3 100644 --- a/src/elements/internal/InternalDateControl/InternalDateControl.ts +++ b/src/elements/internal/InternalDateControl/InternalDateControl.ts @@ -35,12 +35,16 @@ export class InternalDateControl extends InternalEditableControl { renderControl(): TemplateResult { let value: string; - if (this.format === 'unix') { - value = serializeDate(new Date(((this._value as number) ?? 0) * 1000)); - } else if (this.format === 'iso-long') { - value = serializeDate(new Date(this._value as string)); + if (this._value === '0000-00-00' || !this._value) { + value = ''; } else { - value = this._value as string; + if (this.format === 'unix') { + value = serializeDate(new Date(((this._value as number) ?? 0) * 1000)); + } else if (this.format === 'iso-long') { + value = serializeDate(new Date(this._value as string)); + } else { + value = this._value as string; + } } return html` @@ -56,6 +60,7 @@ export class InternalDateControl extends InternalEditableControl { .checkValidity=${this._checkValidity} .value=${value} .i18n=${this.__pickerI18n} + clear-button-visible @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()} @change=${(evt: CustomEvent) => { const field = evt.currentTarget as DatePickerElement; diff --git a/src/elements/internal/InternalDateControl/vaadinStyles.ts b/src/elements/internal/InternalDateControl/vaadinStyles.ts index 83f65ba3..b48821fc 100644 --- a/src/elements/internal/InternalDateControl/vaadinStyles.ts +++ b/src/elements/internal/InternalDateControl/vaadinStyles.ts @@ -74,5 +74,13 @@ registerStyles( :host([theme~='summary-item'][readonly]) [part='value'] { margin-right: 0; } + + :host([theme~='summary-item']) [part='clear-button'] { + transform: scale(1.5); + } + + :host([has-value]) slot[name='suffix'] { + display: none; + } ` ); diff --git a/src/server/hapi/createDataset.ts b/src/server/hapi/createDataset.ts index c6148969..5454d606 100644 --- a/src/server/hapi/createDataset.ts +++ b/src/server/hapi/createDataset.ts @@ -408,7 +408,7 @@ export const createDataset: () => Dataset = () => ({ transaction_template_id: 0, next_transaction_date: '2021-06-19T10:58:39-0700', start_date: '2023-02-11T22:45:01-0700', - end_date: null, + end_date: '0000-00-00', frequency: '1m', error_message: '', past_due_amount: 0, diff --git a/src/static/translations/admin-subscription-form/en.json b/src/static/translations/admin-subscription-form/en.json index 519c22fb..83face8e 100644 --- a/src/static/translations/admin-subscription-form/en.json +++ b/src/static/translations/admin-subscription-form/en.json @@ -33,7 +33,7 @@ "start-date": { "label": "Start date", "helper_text": "", - "placeholder": "", + "placeholder": "Not set", "display_value": "{{ value, date }}", "week": "Week", "calendar": "Calendar", @@ -44,7 +44,7 @@ "end-date": { "label": "End date", "helper_text": "", - "placeholder": "", + "placeholder": "Not set", "display_value": "{{ value, date }}", "week": "Week", "calendar": "Calendar", @@ -71,7 +71,7 @@ "next-transaction-date": { "label": "Next payment date", "helper_text": "", - "placeholder": "", + "placeholder": "Not set", "display_value": "{{ value, date }}", "week": "Week", "calendar": "Calendar",