Haw to get the real date picker value (not the displayed one


Topic: Haw to get the real date picker value (not the displayed one)

bissounet asked 3 years ago

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


Marcin Luczak staff answered 3 years ago

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


bissounet answered 3 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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