fix: add support for special date value of 0000-00-00

Closes #153

Author: pheekus

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`<test-internal-date-control></test-internal-date-control>`;
+    const control = await fixture<TestControl>(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`<test-internal-date-control></test-internal-date-control>`;
     const control = await fixture<TestControl>(layout);

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;

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;
+    }
   `
 );

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,

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