diff --git a/client/events.js b/client/events.js index 874e0788..718c2850 100644 --- a/client/events.js +++ b/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] } diff --git a/plugins/bindable.js b/plugins/bindable.js index b3424084..1f8b27c7 100644 --- a/plugins/bindable.js +++ b/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] ?? '' } diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs index 64a77596..a7a4d352 100644 --- a/tests/src/TwoWayBindings.njs +++ b/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 + ) } diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js index 885486f9..26991660 100644 --- a/tests/src/TwoWayBindings.test.js +++ b/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() + }) })