datepicker与其他现有的jquery代码冲突-jquery ui

问题描述

如果我单击日期输入字段，那么“添加新行”将无法正常工作，就像不追加新行一样。另一方面，如果我未单击日期输入字段，则附加行将正常工作。我猜想，jQuery datepicker与其他现有代码冲突。我试图对日期选择器使用jquery没有冲突，但是没有得到解决方案。有人可以帮我解决这个问题。

这是我的html代码：

@section('extraCss')
@toastr_css
<link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">{{-- for datepicker style --}}
@endsection
@include('invoice.menu-header')
<div class="py-4">
  <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-5">
    <form id="form" action="{{ route('invoices.store') }}" method="post">
      @csrf
      <div class="row">
          <div class="col-sm-6">
              <div class="form-group row">
                <label for="patient_name" class="col-sm-3 col-form-label">Patient Name <span class="required-sign">*</span></label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="patient_name" id="patient_name">
                </div>
              </div>
          </div>
          <div class="col-sm-6">
              <div class="form-group row">
                <label for="date" class="col-sm-3 col-form-label">Date <span class="required-sign">*</span></label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="date" id="date" value="{{ date('d-m-Y') }}">
                </div>
              </div>
          </div>
//............other fields
           <div class="col-sm-12">
              <div class="cart">
                  <div class="cart-tag"><span class=" align-middle">Cart</span></div>
                  <div class="table-responsive">
                      <table class="table">
                        <thead>
                          <tr>
                            <th scope="col">Service</th>
                            <th scope="col">Qty</th>
                             //other th's
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>
                               <input type="text" id="service_name_1" class="service-search">
                               <input type="hidden" id="service_id_1" name="service_id[]">
                            </td>
                             <td>
                                <input type="number" id="quantity_1" name="quantity[]" class="form-control text-right qty" value="1" onchange="calculateTotal();" min="1" oninput="this.value = Math.abs(this.value)">
                              </td>
                           //other tds   
                          </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                           <td><button class="btn btn-primary btn-sm" id="add-new-row">Add New Row</button></td>
                        </tr>
                      </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="text-right">
      <button type="button" class="btn btn-danger btn-sm"><i class="fas fa-redo"></i> Reset</button>
      <button type="submit" class="btn btn-success btn-sm btn-save"><i class="fas fa-check-circle"></i> Save</button>
    </div>
  </form>
</div>

在html下方的脚本是：

@push('extraJs')
@toastr_js
@toastr_render
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>

<script type="text/javascript">
  $(document).ready(function(){
  $("#date").datepicker({
      dateFormat: "dd-mm-yy"
   });

   let rowCount = $('table tbody tr').length;

    serviceAutoComplete();

    $("#add-new-row").on('click',function(event){
      event.preventDefault();
      if ($("#service_id_"+rowCount).val() == "") {
        $("#service_name_"+rowCount).addClass("error-outline");
            alert("Please fill the current row!");
            return false;
      }
      if ($("#service_id_"+rowCount).val() != "") {
        $("#service_name_"+rowCount).removeClass("error-outline");
      }
      rowCount++;
      $('table tbody tr:last').after('<tr>'+
                  '<td><input type="text" id="service_name_'+rowCount+'" class="form-control service-search"><input type="hidden" id="service_id_'+rowCount+'" name="service_id[]"></td>'+
                  '<td><input type="number" id="quantity_'+rowCount+'" name="quantity[]" class="form-control text-right qty" value="1" onchange="calculateTotal();" min="1" oninput="this.value = Math.abs(this.value)"></td>'+
                  '//other tds'+
                '</tr>');
 serviceAutoComplete();
});
function serviceAutoComplete(){
  $('.service-search').autocomplete({
    source:'{{ route('product-autocomplete') }}',minlength:1,autoFocus:true,select:function(e,ui){
      $("#service_id_"+rowCount).val(ui.item.id);
      $("#price_"+rowCount).val(ui.item.price);
      $("#tax_"+rowCount).val(ui.item.tax);
      calculateTotal();
    }
  });
}

$("table").on("click",".remove-btn",function(){
   $(this).closest("tr").remove();
   calculateTotal();
 });
});

//Calculation//
function calculateTotal(){
   //some calculation here
});

</script>
@endpush

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）