jQuery日期选择器在Codeigniter和Bootsrap模式表单中不起作用
jQuery datepicker not work inside the Codeigniter and Bootsrap modal form
我在模态表单中使用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.js中datepicker的代码,我用来存储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>
所以,这就像模态内部的分层问题。
相关文章:
- jQuery日期选择器在Codeigniter和Bootsrap模式表单中不起作用
- 谷歌浏览器模式正则表达式在使用setCustomValidity动态创建表单时不起作用
- 我无法从引导模式中清除表单数据
- 提交表单后,模式窗口未关闭
- 我试图使用引导模式类来制作一个弹出注册表单,但弹出没有'不起作用
- 从JSON模式创建表单,如何添加关闭按钮
- 使用 jQuery UI 模式表单永久更改 HTML 文本
- 更新现有数据时检索引导模式表单中的复选框字段的值时出现问题
- 引导程序中的模式表单验证
- 如何正确验证模式表单
- 如何清理(销毁)Twitter Bootstrap 3.2模式表单内容
- Rails模式表单-在表单提交失败后,用html.erb文件中的内容更新弹出窗口
- Twitter Bootstrap 2模式表单对话框
- 防止角模式表单's destroyStrategy删除值
- Angular模式表单
- Angular模式表单自定义数组中对象属性的类型
- 在Bootstrap中单击按钮时,打开带有验证的模式表单
- 在Bootstrap中使用JavaScript和PHP制作的模式表单在提交时不发送电子邮件
- 如何创建复选框的角度模式表单检查表
- JQueryUI对话框模式表单缓存AJAX应用程序中的旧值