jQuery datepicker在Codeigniter和Bootstrap模式窗体中不起作用

时间:2015-03-29 06:22:33

标签: javascript php jquery codeigniter datepicker

我在模式表单中使用 jQuery datepicker 时遇到问题。但是当我不在模态中使用它时工作。谁能帮助我并给我一些建议?抱歉英文不好。这是我的代码。

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

这是我用来存储jQuery代码的 formelements.js datepicker 的代码:

$(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 });  

多数情况下,我可以告诉你,希望你能帮助我。

1 个答案:

答案 0 :(得分:0)

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

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

所以,就像在模态中分层问题一样。