Topic: Haw to get the real date picker value (not the displayed one)
Expected behavior Get the datepicker value to use it with JS and send it via ajax. Actual behavior The value I get with js .value or Jquery val() is the one displayed and it format isn't exploitable Resources (screenshots, code snippets etc.) I used the snippet below, but the output value is alway the same as the selected and displayed one, even if format and formatSubmit are different, and even with the option : hiddenName: true. https://mdbootstrap.com/snippets/jquery/bissounet/3409671#js-tab-view
Hi,
Based on the Datepicker documentation when custom format is given, second, hidden input element with the same name attribute as the original (only if original input has name attribute) with an optional prefix/suffix is created and takes formatted value. If you want to get the formatted value you'd have to target this hidden input value. Based on your snippet for the input with name='value' attribute getting its hidden value would look like following:
$('.datepicker').on('change', function() {
var dateObject = new Date($("#date-picker-example input[name='value']").val())
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// to use it in php
$('p').text(dateString)
})
I hope this will help you with your problem.
Keep coding, Marcin
Hello,
thank you for these explanations.
I tried unsuccessfully to understand the documentation on datepickers hidden inputs (especially since the codes given do not correspond to the explanations). I am still trying to understand your explanations, but I have not yet succeeded, I have not yet obtained any result by adapting your code.
Although I am not very familiar with jQuery, I will continue to try to better understand the line of code you are proposing.
So far I have found a temporary solution by reaching the hidden input with js and DOM (.nextElementSibling).
Best regards
Marcin Luczak staff commented 3 years ago
Please see the snippet with a working example of my code: https://mdbootstrap.com/snippets/jquery/m-duszak/3419514#js-tab-view
Please note that to make it work you have to add the name attribute to your input. When given formatSubmit attribute, Datepicker creates a hidden input element with the value with the given format and the name attribute corresponding to the original input. When no name attribute is passed to the original input element, hidden input will receive name="undefined".
I hope this will clear this functionality for you a bit :)
bissounet commented 3 years ago
Thank you very much Marcin. Since your answer I have solved my problem using pure js, with the name attribute as explained. You give me today a solution with jQuery which I will use.
As usual it's perfect Marcin, thank you again for your patience !
Marcin Luczak staff commented 3 years ago
I'm happy that you've managed to solve it :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 1.0.0
- Device: PC
- Browser: Chrome, Firefox, Edge
- OS: W10
- Provided sample code: No
- Provided link: Yes
bissounet commented 3 years ago
Another unsuccessful try : https://mdbootstrap.com/snippets/jquery/bissounet/3409783#js-tab-view