model binding for date and datetime input🗓

test/model.spec.js

@@ -2,7 +2,7 @@ import Alpine from 'alpinejs'
 import { wait, fireEvent } from '@testing-library/dom'
 
 global.MutationObserver = class {
-    observe() {}
+    observe() { }
 }
 
 test('x-model has value binding when initialized', async () => {
@@ -26,7 +26,7 @@ test('x-model updates value when updated via input event', async () => {
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'baz' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'baz' } })
 
     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 })
@@ -56,7 +56,7 @@ test('x-model casts value to number if number modifier is present', async () =>
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: '123' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: '123' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(123) })
 })
@@ -71,27 +71,27 @@ test('x-model with number modifier returns: null if empty, original value if cas
 
     Alpine.start()
 
-    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '' }})
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) })
 
-    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-' }})
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) })
 
-    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-123' }})
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-123' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(-123) })
 
-    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '' }})
+    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(null) })
 
-    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-' }})
+    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual('-') })
 
-    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-123' }})
+    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-123' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(-123) })
 })
@@ -107,7 +107,7 @@ test('x-model trims value if trim modifier is present', async () => {
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' } })
 
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 })
@@ -121,7 +121,7 @@ test('x-model updates value when updated via changed event when lazy modifier is
 
     Alpine.start()
 
-    fireEvent.change(document.querySelector('input'), { target: { value: 'baz' }})
+    fireEvent.change(document.querySelector('input'), { target: { value: 'baz' } })
 
     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 })
@@ -140,7 +140,7 @@ test('x-model binds checkbox value', async () => {
     expect(document.querySelector('input').checked).toEqual(true)
     expect(document.querySelector('span').getAttribute('bar')).toEqual("true")
 
-    fireEvent.change(document.querySelector('input'), { target: { checked: false }})
+    fireEvent.change(document.querySelector('input'), { target: { checked: false } })
 
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("false") })
 })
@@ -161,7 +161,7 @@ test('x-model binds checkbox value to array', async () => {
     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
     expect(document.querySelector('span').getAttribute('bar')).toEqual("bar")
 
-    fireEvent.change(document.querySelectorAll('input')['1'], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input')['1'], { target: { checked: true } })
 
     await wait(() => {
         expect(document.querySelectorAll('input')[0].checked).toEqual(true)
@@ -192,16 +192,16 @@ test('x-model checkbox array binding supports .number modifier', async () => {
     expect(document.querySelectorAll('input[type=checkbox]')[2].checked).toEqual(false)
     expect(document.querySelector('span').getAttribute('bar')).toEqual("[2]")
 
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[2], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[2], { target: { checked: true } })
 
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[2,3]") })
 
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: true } })
 
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[2,3,1]") })
 
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: false }})
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[1], { target: { checked: false }})
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: false } })
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[1], { target: { checked: false } })
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[3]") })
 })
 
@@ -221,7 +221,7 @@ test('x-model binds radio value', async () => {
     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
     expect(document.querySelector('span').getAttribute('bar')).toEqual('bar')
 
-    fireEvent.change(document.querySelectorAll('input')[1], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input')[1], { target: { checked: true } })
 
     await wait(() => {
         expect(document.querySelectorAll('input')[0].checked).toEqual(false)
@@ -250,7 +250,7 @@ test('x-model binds select dropdown', async () => {
     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
     expect(document.querySelector('span').innerText).toEqual('bar')
 
-    fireEvent.change(document.querySelector('select'), { target: { value: 'baz' }});
+    fireEvent.change(document.querySelector('select'), { target: { value: 'baz' } });
 
     await wait(() => {
         expect(document.querySelectorAll('option')[0].selected).toEqual(false)
@@ -304,7 +304,7 @@ test('x-model binds nested keys', async () => {
     expect(document.querySelector('input').value).toEqual('foo')
     expect(document.querySelector('span').innerText).toEqual('foo')
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
@@ -325,7 +325,7 @@ test('x-model undefined nested model key defaults to empty string', async () =>
     expect(document.querySelector('input').value).toEqual('')
     expect(document.querySelector('span').innerText).toEqual('')
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
@@ -375,3 +375,69 @@ test('x-model bind color input', async () => {
     })
 
 })
+
+// <input type="button"> 
+test('x-model bind button input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: 'foo' }">
+        <input type="button" x-model="key">
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('foo')
+    expect(document.querySelector('span').innerText).toEqual('foo')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('bar')
+        expect(document.querySelector('span').innerText).toEqual('bar')
+    })
+})
+
+// <input type="date"> 
+test('x-model bind date input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '2020-07-10' }">
+      <input type="date" x-model="key" />
+      <span x-text="foo"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('foo')
+    expect(document.querySelector('span').innerText).toEqual('foo')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '2021-01-01' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('2021-01-01')
+        expect(document.querySelector('span').innerText).toEqual('2021-01-01')
+    })
+})
+
+// <input type="datetime-local"> 
+test('x-model bind datetime-local input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '2020-01-01T20:00' }">
+      <input type="date" x-model="key" />
+      <span x-text="foo"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('2020-01-01T20:00')
+    expect(document.querySelector('span').innerText).toEqual('2020-01-01T20:00')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '2021-02-02T20:00' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('2021-02-02T20:00')
+        expect(document.querySelector('span').innerText).toEqual('2021-02-02T20:00')
+    })
+})