jquery datepicker inside modal dialog

Question

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.

im not really sure how to to be honest. ill edit it with relevant script. — Mr Sorbose

abidmix abidmix · Accepted Answer · 2013-03-04T12:19:22

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 datepicker inside modal dialog

1 Answers