Question

我正在使用Javascript几个月，而且我遇到了这个问题。我有一个包含2个模态的页面，其中包含一个JQuery-UI-Datepicker。第一个模态创建一个带有开始日期的条目，第二个模态允许对此条目进行更改。

第一种模式完美无缺。当我尝试在第二个模态中更改日期时，没有任何反应。我可以选择一个月，一年，但是当我选择日期时，日历表单会消失，并且值不会更改。

我假设日期选择器隐藏在模态后面here, 但解决方案对我来说没有用。第二个假设就像在this question中一样，但它对我也没有帮助。

这是我使用的代码（我自己没有写）：

$(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

我的想法是只选择函数的第二个模态，但还没有实现它。

你能否分享一下你该怎么做的想法？

Answer 1

几天后我找到了解决方案。

首先，事实证明有几个输入字段，代码的编写方式与它只选择第一个输入字段的方式相同。这就是其他领域没有回应的原因。

为了解决这个问题，我在点击的元素中添加了selected类。

其次，选定的输入字段与其上方的a类具有相同的ID。 This问题是一个很大的帮助。我更改了ID并且它有效。

该功能现在如下所示：

＆＃13;

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

＆＃13;

.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}"}

＆＃13;

希望这有助于其他人。

Bootstrap模式中的JQuery Datepicker

1 个答案: