amsul / pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
http://amsul.ca/pickadate.js
MIT License
7.7k stars 1.02k forks source link

Rendering on input element v5 #1230

Open Shaker96 opened 3 years ago

Shaker96 commented 3 years ago

Hi! very interested in using a vanilla version of this plugin... I am trying to render on an input element like shown below but when I select a date on the calendar, the input's value is not updated automatically and when I tried to access it with the pickadate:change the event fires but I don't have access to the formatted value as it says in the docs. Thanks in advance for the help

html

<div class="wrapper">
   <input type="date" id="element">
</div>

JS

const initialState = {
    selected: new Date(Date.now()), // this value is shown in the input on first load
    template: 'MM/DD/YYYY'
}
const picker = pickadate.create(initialState)
const inputEl = document.getElementById('element')
pickadate.render(inputEl, picker)

inputEl.addEventListener('pickadate:change', (customEvent) => {
    console.log('New value:', customEvent) // => this custom event doesn't have the formatted value
})

and the result in devtools is

<div class="wrapper">
    <input type="date" id="element" readonly="">
    <div class="pickadate--input-root">...</div>
</div>