[英]Fancybox wiht ui-datepicker not showing
i want to include datepicker-ui in fancybox but the datepicker not showing in modal. 我想将datepicker-ui包含在fancybox中,但datepicker不会以模式显示。 I change z-index to be bigger on datepicker-ui. 我在datepicker-ui上将z-index更改为更大。
<div class="col-md-6">
<label style="color:#003580;">Дата на настаняване:</label>
<input type="text" id="modal-datepicker1" readonly/>
</div>
<div class="col-md-6">
<label style="color:#003580;">Дата на напускане:</label>
<input type="text" id="modal-datepicker2" readonly/>
This is html in modal he is whit display:none; 这是html模态显示,没有显示。
$('#btnForm').click(function () {
$.fancybox({
autoScale: true,
content: $("#divForm").html(),
openEffect : 'none',
closeEffect : 'none',
afterLoad: function () {
$("#modal-datepicker1").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#modal-datepicker2").datepicker({
dateFormat: 'yy-mm-dd'
});
}
});
});
Datepickers are there in DOM tree, but they not showing. DOM树中有日期选择器,但未显示。 What can i do? 我能做什么? Please, any ideas. 请提出任何想法。
Thanks in advance. 提前致谢。
I made a quick demo and it works fine without readonly
attribute - 我做了一个快速演示,没有readonly
属性,它可以正常工作-
<p>Date: <br />
<input type="text" id="modal-datepicker1" />
</p>
<p>
Date readonly: <br />
<input type="text" id="modal-datepicker1" readonly />
</p>
http://codepen.io/anon/pen/rmdYvg http://codepen.io/anon/pen/rmdYvg
Forked the CodePen from @Janis as it did not work exactly. 从@Janis分叉了CodePen,因为它无法正常工作。
http://codepen.io/anon/pen/vmRRGL http://codepen.io/anon/pen/vmRRGL
HTML HTML
<p>Date: <br />
<input type="text" id="modal-datepicker1" />
</p>
<p>Date readonly: <br />
<input type="text" id="modal-datepicker1" readonly />
</p>
JavaScript JavaScript的
$(function() {
$("#btnForm").click(function() {
$.fancybox.open({
src: "#divForm",
type: "inline",
touch: false,
autoFocus: false,
afterLoad: function() {
$("#divForm input").datepicker({
dateFormat: "yy-mm-dd"
});
}
});
});
});
Since input
has readonly
attribute, if a user selects a date, it canot be written into the field. 由于input
具有readonly
属性,因此如果用户选择日期,则无法将其写入字段。 I would advise not using readonly
. 我建议不要使用readonly
。 If you want to prevent the user from entering content except via the datepicker, there is a way to do that too. 如果要阻止用户通过日期选择器输入内容,也可以采用这种方法。
I was find something and want to show you. 我发现了一些东西想告诉你。
<div class="col-md-6">
<label style="color:#003580;">Дата на настаняване:</label><br>
<input type="date" id="modal-datepicker-date-from" style="border: 1px solid #ddd;" />
</div>
<div class="col-md-6">
<label style="color:#003580;">Дата на напускане:</label><br>
<input type="date" id="modal-datepicker-date-to" style="border: 1px solid #ddd;" >
</div>
$("a.fancybox").click(function() {
$.fancybox({
autoScale: true,
content: $("#divForm").html()
});
$('#modal-datepicker-date-from').on('click',function(){
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({
dateFormat: 'yy-mm-dd',
setDate: new Date(),
});
}
});
});
Simply and good. 简单又好。 Simply and good. 简单又好。 I hope so this will help for someone. 我希望这样对某人有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.