JQuery Bootstrap 模式中的日期选择器

Question

我只使用 Javascript 几个月，就被这个问题困住了。我有一个包含 2 个模式的页面，其中包含一个 JQuery-UI-Datepicker。第一个模式创建一个带有开始日期的条目，第二个模式允许更改此条目。

第一个模式完美运行。当我尝试更改第二个模式中的日期时，没有任何反应。我可以 select 一个月，一年，但是当我 select 一个日期时，日历形式消失，并且值没有改变。

我假设日期选择器隐藏在模式后面但解决方案对我没有用。第二个假设就像 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

我有想法 select 只为函数添加第二个模态，但还没有实现。

能否分享一下您的想法？

Answer 1

几天后我找到了解决办法。

首先，原来有几个输入字段，代码是按照只选择第一个输入字段的方式编写的。这就是其他领域没有回应的原因。

为了解决这个问题，我向单击的元素添加了 selected class。

其次，所选输入字段与其上方的 a class 具有相同的 ID。 This 问题帮了大忙。我更改了 id，它起作用了。

函数现在看起来像这样：

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

希望这对其他人有帮助。

JQuery Bootstrap 模式中的日期选择器

JQuery Datepicker in Bootstrap modal

haml

jquery-ui

bootstrap-modal