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",