Input field losing value after onfocus

Hello. Little issue regarding datepickers and open modal with selected values.. Let me try to make it simple:

Landing page has two datepickers. I fill in the dates with bootstrap datepickers.
Then I click "Book now" and a bootstrap modal opening.
I grab the values from the landing page form and simply insert them into the matching fields in the booking form. (WORKING)

BUT, When I focus the input field(in the modal) and then onfocus..the input field loses it's value. It dissapears.

Code:

Landing page "form"

<input type="date" class="form-control datepicker departureDateRedirect" readonly >
<input type="text" class="form-control datepicker arrivalDateRedirect" readonly>
<button type="button" class="btn btn-github open-reservation-modal">Open booking modal</button>

jQuery that gets and puts the value:

function handleModal(){
       
            var departureDate = $('.departureDateRedirect').val();
            var arrivalDate = $('.arrivalDateRedirect').val();

            $('#departureDate').val(departureDate);
            $('#arrivalDate').val(arrivalDate);

            $('#reservation-form').modal('show');
        
            return false;
        }
        $('.open-reservation-modal').on('click',handleModal);

And then the two modal input fields:

<input type="date" class="form-control datepicker " id="departureDate" name="departureDate" autocomplete="off"/>
<input type="text" class="form-control datepicker" id="arrivalDate" name="arrivalDate" />

What I have tried:

If I remove datepicker class from the modal inputs, the value contiue to be there after onfocus.
If i use the HTML type="date" datepickers instead of text/bootstrap it is also keeping its value and working fine.

So the problem is with this bootstrap datepicker I guess, but I can't figure out exactly what.

Someone have any ideas? Thanks.

gitwithravish

5 years ago

Best Answer

Level 16

It is always good to use the plugin's methods to interact with it. Meaning try to set date using setDate() method instead of .val().

Bootstrap datepicker docs

https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setdate

Edit: if this is not the datepicker you are using, then please share the documentation link of your datepicker plugin

1 like

ponnydalen

5 years ago

Level 2

Yeah, I managed to get it working by doing this:

var departureDate = $('.departureDateRedirect').data('datepicker').getDate();
var arrivalDate = $(".arrivalDateRedirect").data('datepicker').getDate();

     $('#departureDate').data('datepicker').setDate(departureDate);
      $('#arrivalDate').data('datepicker').setDate(arrivalDate);

Thank you @gitwithravish

1 like

Please or to participate in this conversation.