Merge pull request nullstack#350 from nullstack/bind-date

✨ bind date

Author: Mortaro

client/events.js

@@ -67,6 +67,12 @@ export function generateCallback(selector, name) {
           object[property] = event.target[valueName] === 'true'
         } else if (typeof object[property] === 'number') {
           object[property] = +event.target[valueName] || 0
+        } else if (object[property] instanceof Date) {
+          const [yyyy, mm, dd] = event.target[valueName].split('-')
+          object[property].setFullYear(yyyy)
+          object[property].setMonth(+mm - 1)
+          object[property].setDate(dd)
+          object[property] = object[property]
         } else {
           object[property] = event.target[valueName]
         }

plugins/bindable.js

@@ -12,6 +12,11 @@ function transform({ node, environment }) {
     node.children = [object[property] ?? '']
   } else if (node.type === 'input' && node.attributes.type === 'checkbox') {
     node.attributes.checked = object[property]
+  } else if (node.type === 'input' && node.attributes.type === 'date' && object[property] instanceof Date) {
+    const yyyy = object[property].getFullYear()
+    const mm = (object[property].getMonth() + 1).toString().padStart(2, '0')
+    const dd = object[property].getDate().toString().padStart(2, '0')
+    node.attributes.value = `${yyyy}-${mm}-${dd}`
   } else {
     node.attributes.value = object[property] ?? ''
   }

tests/src/TwoWayBindings.njs

@@ -9,6 +9,7 @@ class TwoWayBindings extends Nullstack {
   boolean = true
   character = 'a'
   text = 'aaaa'
+  date = new Date()
 
   object = { count: 1 }
   array = ['a', 'b', 'c']
@@ -143,6 +144,14 @@ class TwoWayBindings extends Nullstack {
         >
           rebounce
         </button>
+        <input 
+          type="date" 
+          bind={this.date} 
+          data-instanceof-date={this.date instanceof Date} 
+          data-date={this.date.getDate()} 
+          data-month={this.date.getMonth() + 1} 
+          data-year={this.date.getFullYear()} 
+        />
       </div>
     )
   }

tests/src/TwoWayBindings.test.js

@@ -257,4 +257,19 @@ describe('TwoWayBindings', () => {
     const element = await page.$('[data-render-clicked-and-inputed]')
     expect(element).toBeTruthy()
   })
+
+  test('dates can be bound to date inputs', async () => {
+    await page.$eval('[data-instanceof-date]', (element) => {
+      element.focus()
+      element.value = '1992-10-16'
+      element.blur()
+      const event = new Event('input')
+      element.dispatchEvent(event)
+    })
+    await page.waitForSelector('[data-date="16"]')
+    await page.waitForSelector('[data-month="10"]')
+    await page.waitForSelector('[data-year="1992"]')
+    const element = await page.$('[data-date="16"]')
+    expect(element).toBeTruthy()
+  })
 })