我在模式表单中使用 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 });
多数情况下,我可以告诉你,希望你能帮助我。
答案 0 :(得分:0)
我在谷歌上搜索答案。现在,我知道问题出在哪里。这不是jQuery问题,它只是关于CSS问题。我添加了内联css类:
<style>
.datepicker{z-index:+1, !important}
</style>
所以,就像在模态中分层问题一样。