jQuery的日期选择器内的模态对话框 [英] jquery datepicker inside modal dialog

问题描述

已询问此问题，但结果不同. 人们在使用模式对话框中的日期选择器并使日期选择器(使用z-index属性)显示时遇到了麻烦.

但是，我只是简单地复制了用于使datepicker正常工作的js，但是在视图中为模式弹出窗口.然后将显示日期选择器，但不会使用选定的日期填充选定的输入框.

我在其他地方均可使用的代码如下:

$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });

，模态对话框类中的输入是datepicker.

我不确定我要的解决方案是真的.因为该函数在任何地方都可以使用，并且确实可以显示(建议使用jquery)，但是不会在输入框中填充所选的日期.... 有任何想法吗? ........

function modalfollow()
{
$('<div>').dialog({
    title:  'Add Follow',
    height: '350', 
    width:  '400',
    open: function ()
            {
            $(this).load('<?=base_url();?>leads/add_follow/<?=$this->uri->segment(3);?>/');
            },         
    modal: true 
    });
// return false so <a> or <button> doesnt fire + reload page
return false;
}

这将加载用于加载视图的模式框.

在此级别上，日期选择器不起作用.

解决方案

我不确定您是如何设置代码的，但是在此小提琴中我无需任何努力即可工作.您是否有更新面板? >

标记

<div id="dialog" title="Basic dialog">
<input type="text" class="datepicker" /></div>
<button id="opener">Show</button>

JavaScript

 $(function () {

   $(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd'
});

$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});
$("#opener").click(function () {
    $("#dialog").dialog("open");
 });
 });

示例

This question has been asked but for different result. People have had trouble using the date picker inside the modal dialog box and making the date picker show up (using the z-index property).

However i have simply copied the js used to make the datepicker work from the foot, but in the view for the modal popup. this then shows the date picker, but does not populate the selected input box with the selected date.

my code that works everywhere else is the following:

$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });

and the input in the modal dialog class is datepicker.

Im not sure what the solution i am asking for would be really. as the function works everywhere and does indeed show up (suggesting the jquery is working) but just not populate the input box with the selected date.... any ideas? ........

function modalfollow()
{
$('<div>').dialog({
    title:  'Add Follow',
    height: '350', 
    width:  '400',
    open: function ()
            {
            $(this).load('<?=base_url();?>leads/add_follow/<?=$this->uri->segment(3);?>/');
            },         
    modal: true 
    });
// return false so <a> or <button> doesnt fire + reload page
return false;
}

this loads the modal box that loads the view.

it is at this level the datepicker does not work.

解决方案

I am not sure how you are setting up up your code but I have it working without any hard work in this fiddle.Do you have update panels?

Markup

<div id="dialog" title="Basic dialog">
<input type="text" class="datepicker" /></div>
<button id="opener">Show</button>

Javascript

 $(function () {

   $(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd'
});

$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});
$("#opener").click(function () {
    $("#dialog").dialog("open");
 });
 });

Example

这篇关于jQuery的日期选择器内的模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！