jQuery Dialog и Datepicker
 

Уважаемые господа.

Помогите разобраться. Недавно начал изучать библиотеку jQuery и столкнулся с проблемой:

Создаю модальное диалоговое окно (jQuery.ui.Dialog), в которое необходимо внедрить календарь (jQuery.ui.Datepicker). Отдельно окно и календарь создаются и работают, но никак не получается их совместить. Пишу следующий код:


Код

$(document).ready(function(){
    $("#form_jQuery").dialog({
        height:480,
        width:650,
        autoOpen:true,
        modal:true,
        overlay:{opacity: 0.3,background:"gray"},
        title:"Добавление расписания",
        buttons:{"Добавить":function(){exec_form_rasp("addrasp","filter","");},"Отмена":function(){$('#form_jQuery').dialog('close');}},
        open:function(){
            $(document).ready(function(){
                $('#date_nach').datepicker({
                    showOn: 'both', 
                    buttonImageOnly: false, 
                    buttonImage: 'img/cal.gif', 
                    buttonText: 'Календарь', 
                    dateFormat: 'dd/mm/yy'});
                $('#date_okonch').datepicker({
                    showOn: 'both', 
                    buttonImageOnly: false, 
                    buttonImage: 'img/cal.gif', 
                    buttonText: 'Календарь', 
                    dateFormat: 'dd/mm/yy'});
                });
            },
        close:function(){$("#form_jQuery").dialog("destroy");}});
      });

Окошко календаря показывается под диалоговым окном и, к тому же, я его не могу использовать, поскольку оно неактивно (окно модальное)

Помогите решить проблему

ну второй раз цепляться на ready, когда документ уже заведомо загружен, бессмысленно :)

open:function(){
                $('#date_nach').datepicker({
                    showOn: 'both', 
                    buttonImageOnly: false, 
                    buttonImage: 'img/cal.gif', 
                    buttonText: 'Календарь', 
                    dateFormat: 'dd/mm/yy'});
                $('#date_okonch').datepicker({
                    showOn: 'both', 
                    buttonImageOnly: false, 
                    buttonImage: 'img/cal.gif', 
                    buttonText: 'Календарь', 
                    dateFormat: 'dd/mm/yy'});
            },

Хорошо, а как привязать эти календари в диалоговое окно? В команде вызова окна надо что-то написать

Извиняюсь. не увидел сначала, что код - это правильный вариант.
Буду проверять. Спасибо

К сожаению, не помогло. Окошко календаря также отображается под диалоговым модальным окном. Может есть еще какие предложения по решению проблемы?

А поля #date_nach и #date_okonch точно расположены внутри диалогового окна?.

Также, если выплывающее окно календаря вылезет под диалогом, надо переделать таблицу стилей datepicker - добавить или изменить поле z-index для стиля календарика. Его значение должно быть больше, чем значение z-index для диалогового окна.

Поля однозначно внутри диалогового окна. Точнее технология следующая:
1. Создается пустой div под диалоговое окно
2. В созданный div динамически прописывается экранная форма
3. Создается jQuery.dialog на данный div

Соответственно, поля для дат однозначно внутри этого div'а и попадают внутрь диалогового окна.

Я бы проверил через Firebug...

скорее всего проблемы с z-index, если речь о попадании под окно именно диалогов календарика.

Именно их. Попробую поиграться с z-index

просто поправь таблицу стилей календарика.

Изменил z-index у календаря и все получилось, но неужели это единственный способ. Если я ничего не напутал, то Dialog свой параметр z-index генерирует автоматически, исходя из расчетов максимального значения. Тогда получается, что для календаря необходимо устанавливать максимально возможное значение. А как же тогда быть, если диалоговые окна накладываются друг на друга? Хорошо, если они модальные с блокированием задней части окна браузера. А если - нет, тогда получится, что календарь будет выводиться поверх всех окон, что не совсем верно с точки зрения правил интерфесов.

Может есть какой-то способ указать, что календарь является дочерним элементом для диалогового окна?

А если ему вообще не ставить в стилях z-index?

Тогда получается, что у Dialog параметр устанавливается, а календарь получает минимальный параметр.

Проверка показала, что не получается, если убрать параметр. Из Dialog параметр убрать без корректировки js убрать нельзя - он рассчитывается там

У календаря: z-index: 2147483647;

ui.dialog.js:

this.activate = function() {
var maxZ = 0;
$('.ui-dialog:visible').each(function() {
maxZ = Math.max(maxZ, parseInt($(this).css("z-index"),10));
});
maxZ-=48; //Чтобы не сильно мнил себя царем горы
overlay.$el && overlay.$el.css('z-index', ++maxZ);
uiDialog.css("z-index", ++maxZ);
};

т.е. на все, что нужно поверх dialog'а останется z-index'ы с 2147483601 до ...47
М.б. накладки с чем еще, но путь ясен.

Спасибо