JQuery Datepicker in Bootstrap modal

Question

I'm working with Javascript only for a couple of months, and am stuck with this issue. I have a page with 2 modals, which contains a JQuery-UI-Datepicker. First modal creates an entry with start date, and the second modal allows making changes to this entry.

First modal works perfectly. When I try to change the date in the second modal, nothing happens. I can select a month, a year, but when I select a date, the calendar form disappears, and the value is not changed.

I assumed that the datepicker hide behind the modal as here, but the solution didn't work out for me. The second assumption was like in this question but it wasn't helpful for me either.

Here's the code I work with (I didn't write it myself):

$(document).on("click",".datepicker",function() {
     var first_datepicker = $(".datepicker:first");
     if($(this) !== first_datepicker || $(this).datepicker('getDate') == null) {

       $(this).datepicker('setDate',first_datepicker.datepicker('getDate'));
     }
  });

// First modal
.modal.fade{id: "create_ea_bahncard", role: "dialog", tabindex: "-1"}
  .modal-dialog{role: "document"}
    .modal-content
      = semantic_form_for @ea_bahncard,url: finance_ea_bahncards_path(person_id: person),html_options: {method: :post} do |f|
        = f.input :person_id, as: :hidden
        .modal-header
          .row
            .col-md-10
              %h2
                Neue Bahncard
            .col-md-2
              %button.close{type: :button, data: {dismiss: 'modal'}, aria: {hidden: 'true'}}
                %i.fa.fa-times-circle
        .modal-body
          .row
            .col-md-5
              = f.input :bahncard_type, as: 'string', label: "Bahncard-Typ", input_html: {class: "form-control"}
              = f.input :valid_until, as: 'bs_jquerydate', label: "Gültig bis", input_html: {class: "form-control"}
            .col-md-5
              = f.input :total_amount, as: 'string', label: "Voller Betrag", input_html: {class: "form-control"}


        .modal-footer
          = submit_tag 'Speichern', class: 'btn btn-default btn-primary'
          %button.btn{data: {dismiss: 'modal'}} Abbrechen
          
          
// Second modal
.modal.fade{id: "ea_bahncard_#{bc.id}"}
  = semantic_form_for bc,url: finance_ea_bahncard_path(bc),html_options: {method: :put} do |f|
    = f.input :person_id, as: :hidden
    .modal-header
      .row
        .col-md-10
          %h2
            Bahncard bearbeiten
        .col-md-2
          %button.close{type: :button, data: {dismiss: 'modal'}, aria: {hidden: 'true'}}
            %i.fa.fa-times-circle
    .modal-body
      .row
        .col-md-5
          = f.input :request_date, as: 'string', label: "Antragsdatum", input_html: {class: "form-control"}
          = f.input :bahncard_type, as: 'string', label: "Bahncard-Typ", input_html: {class: "form-control"}
          = f.input :valid_until, as: 'bs_jquerydate', label: "Gültig bis", input_html: {class: "form-control"}
        .col-md-5
          = f.input :proportional_amount, as: 'string', label: "Anteiliger Betrag", input_html: {class: "form-control"}
          = f.input :total_amount, as: 'string', label: "Voller Betrag", input_html: {class: "form-control"}
    .modal-footer
      = submit_tag 'Speichern', class: 'btn btn-default btn-primary'
      %button.btn{data: {dismiss: 'modal'}} Abbrechen

I have the idea of selecting only the second modal for the function, but didn't implement it yet.

Can you please share you ideas of what to do?

Answer 1

After a couple of days I found a solution.

First, it turned out that there were several input fields and the code was written the way it chose only the first input field. That is the reason other fields did not respond.

For solving that i added a selected class to the clicked element.

Second, the selected input field had the same id as the a class above it. This question was a great help. I changed the id and it worked.

The function now looks like this:

$(document).delegate(".datepicker", 'click', function() {

      $('.datepicker').removeClass('selected');
      $(this).addClass('selected');
      $(this).datepicker({dateFormat: 'dd-mm-yy'});
      $(this).datepicker('setDate', new Date($(this).val()));

  });

.modal-body
  .row
     .col-md-3
      = f.input :requested_at, as: 'bs_jquerydate', label: "Eingangsdatum", input_html: {class: "date", id: "input_edit_request_#{request.id}"}

.modal-body
   .row
      .col-md-5
       = f.input :valid_until, as: 'bs_jquerydate', label: "Gültig bis", input_html: {class: "form-control", id: "input_ea_bahncard_#{bc.id}"}

Hope this helps others.