Pickadate with editable set to true doesn`t update the field value on the request object

[alexchirolde]

When I try to manually edit a input with editable set to true, visually it changes, but Im getting the old value in the request. Ive been looking at the code and theres a hidden input which takes the actual value. If I use the picker this value updates perfectly, but when I type this value doesnt change.

[DanielRuf]

Hi @alexchirolde,

Please provide a codepen with your code and the exact pickadate version so we can check this.

[alexchirolde]

@DanielRuf thanks for the quick reply. Version: pickadate.js v3.6.3, 2019/04/03 The problem is when I submit the form. The date value Im getting on my laravel controller are not the ones I manually type on the input, Im getting the ones I select using the date picker.

This is the js code: $('.pickadate').pickadate({ format: 'dd.mm.yyyy', selectYears: true, selectMonths: true, formatSubmit: 'dd.mm.yyyy', hiddenSuffix: '', editable: true });

[alexchirolde]

For example, you can manually change the dates on this pen. But in a real scenario when you submit a form with this code you will receive on the request object the value you introduce using the date picker not the one you manually type.

Codepen

[DanielRuf]

Your codepen does not work because the references js file does not exist.

[DanielRuf]

You can use the right files from https://unpkg.com/browse/pickadate@3.6.4/lib/

[alexchirolde]

Hi @DanielRuf The codepen isnt the problem. You can find a lot of examples on the oficial documentation about a picker, you can recreate them yourself using something like this $('.pickadate').pickadate({ format: 'dd.mm.yyyy', selectYears: true, selectMonths: true, formatSubmit: 'dd.mm.yyyy', hiddenSuffix: '', editable: true }); But the problem is once you submit the form where this input is on. As you can see on my first post, the value on the form of the input is 30.05.2050(manually added) and in the hidden input(which is the one who sends the information back to my controller) is 28.05.2020(generated by using the picker). Please let me know if you understand me better.

[DanielRuf]

Please see the note in the docs:

An important thing to note here is that this disables keyboard bindings on the input element, such as arrow keys opening the picker. You will have to add your own bindings as you see fit.

[alexchirolde]

@DanielRuf I have been reading and found an idea on this post

I just add this on picker.js after the on('change, ...) event:

$ELEMENT.
            // If the value changes, update the hidden input with the correct format.
            on('blur keypress' + STATE.id, function() {
                P._hidden.value = ELEMENT.value

            });

This blur keypress event did the trick. Thxs for everything.