jQuery日期选择器在Codeigniter和Bootsrap模式表单中不起作用

jQuery datepicker not work inside the Codeigniter and Bootsrap modal form

本文关键字:模式 表单 不起作用 Bootsrap 日期 选择器 Codeigniter jQuery      更新时间:2023-09-26

我在模态表单中使用jQuery日期选择器时遇到问题。但当我不在模态中使用它时,它起了作用。有人能帮我并给我一些建议吗?抱歉英语不好。这是我的密码。

<div class="page-content-wrapper">
    <!-- MODAL STICK UP  -->
    <div class="modal fade stick-up" id="reg_pasien" tabindex="-1" role="dialog" aria-labelledby="reg_pasien" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header clearfix ">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i>
            </button>
            <h4 class="p-b-5"><span class="semi-bold">Registrasi</span> Pasien</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group form-group-default">
                    <label>nama lengkap</label>
                    <input id="namalengkap" type="text" class="form-control" placeholder="Nama lengkap pasien">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group form-group-default">
                    <label class="col-sm-9 control-label">Jenis Kelamin</label>
                    <div class="col-sm-3">
                    <div class="radio radio-primary">
                      <input type="radio" value="L" name="optionyes" id="boy">
                        <label for="boy">Laki - laki</label>
                        <input type="radio" checked="checked" value="P" name="optionyes" id="girl">
                        <label for="girl">Perempuan</label>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group form-group-default">
                    <label>Alamat</label>
                    <textarea class="form-control" id="alamatpasien" placeholder="contoh: Jl. Margorejo Indah 115A"></textarea>
                  </div>
                </div>
                </div>
                <div class="row">
                <div class="col-sm-6">
                  <div class="form-group form-group-default">
                    <label>Kota</label>
                    <input id="kotapasien" type="text" class="form-control" placeholder="e.g. Surabaya">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group form-group-default">
                    <label>Propinsi</label>
                    <select class="cs-select cs-skin-slide" data-init-plugin="cs-select">
                      <option value="-"> -- Pilih Propinsi -- </option>
                      <option value="Aceh">Aceh</option>
                      <option value="Bali">Bali</option>
                      <option value="Banten">Banten</option>
                      <option value="Bengkulu">Bengkulu</option>
                      <option value="Gorontalo">Gorontalo</option>
                      <option value="Jakarta">Jakarta</option>
                      <option value="Jambi">Jambi</option>
                      <option value="Jawa Barat">Jawa Barat</option>
                      <option value="Jawa Tengah">Jawa Tengah</option>
                      <option value="Jawa Timur">Jawa Timur</option>
                      <option value="Kalimantan Barat">Kalimantan Barat</option>
                      <option value="Kalimantan Selatan">Kalimantan Selatan</option>
                      <option value="Kalimantan Tengah">Kalimantan Tengah</option>
                      <option value="Kalimantan Utara">Kalimantan Utara</option>
                      <option value="Kepulauan Bangka Belitung">Kepulauan Bangka Belitung</option>
                      <option value="Kepulauan Riau">Kepulauan Riau</option>
                      <option value="Lampung">Lampung</option>
                      <option value="Maluku">Maluku</option>
                      <option value="Maluku Utara">Maluku Utara</option>
                      <option value="Nusa Tenggara Barat">Nusa Tenggara Barat</option>
                      <option value="Nusa Tenggara Timur">Nusa Tenggara Timur</option>
                      <option value="Papua">Papua</option>
                      <option value="Papua Barat">Papua Barat</option>
                      <option value="Riau">Riau</option>
                      <option value="Sulawesi Barat">Sulawesi Barat</option>
                      <option value="Sulawesi Selatan">Sulawesi Selatan</option>
                      <option value="Sulawesi Tengah">Sulawesi Tengah</option>
                      <option value="Sulawesi Utara">Sulawesi Utara</option>
                      <option value="Sumatera Barat">Sumatera Barat</option>
                      <option value="Sumatera Selatan">Sumatera Selatan</option>
                      <option value="Sumatera Utara">Sumatera Utara</option>
                      <option value="Daerah Istimewa Yogyakarta">Daerah Istimewa Yogyakarta</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group form-group-default">
                    <label>Tempat Lahir</label>
                    <input id="lahirpasien" type="text" class="form-control" placeholder="e.g. Surabaya">
                  </div>
                </div>
                <div class="form-group form-group-default input-group col-sm-6">
                  <label>Tanggal Lahir</label>
                  <input type="text" class="form-control" placeholder="Pilih Tanggal" id="datepicker-component2">
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button id="add-app" type="button" class="btn btn-primary  btn-cons">Registrasi</button>
            <button type="button" class="btn btn-cons" data-dismiss="modal">Batal</button>
          </div>
        </div>
      </div>
    </div>  

这是formelements.jsdatepicker的代码,我用来存储jQuery代码:

$(document).ready(function() {
    //Multiselect - Select2 plug-in
    $("#multi").val(["Jim", "Lucy"]).select2();
    //Date Pickers
    $('#datepicker-range, #datepicker-component, #datepicker-component2').datepicker();
    $('#datepicker-embeded').datepicker({
        daysOfWeekDisabled: "0,1"
    });
    $('#datepicker-custom').datepicker({ dateFormat: 'dd-mm-yy',
        minDate: '+5d',
        changeMonth: true,
        changeYear: true,
   });

    var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
    $.fn.modal.Constructor.prototype.enforceFocus = function() {};
    $confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
    });
    $confModal.modal({ backdrop : false });  

这就是我能通知你的全部内容,希望你能帮助我。

在谷歌上搜索答案之后。现在,我知道问题出在哪里了。这不是jQuery的问题,只是css的问题。我添加内联css类:

<style>
  .datepicker{z-index:+1, !important}
</style>

所以,这就像模态内部的分层问题。