Datepicker behind lightbox

Gantt
#1

Hi and thanks for any help!

I am using a date picker in a lightbox but when I click on the field it displays behind the lightbox and is uneditable. Not sure what I am doing wrong.

code…

.dhx_calendar_cont input {
  width: 96px;
  padding: 0;
  margin: 3px 10px 10px 10px;
  font-size: 11px;
  height: 17px;
  text-align: center;
  border: 1px solid #ccc;
  color: #646464;
}

.dhtmlxcalendar_dhx_skyblue, .dhtmlxcalendar_dhx_web, .dhtmlxcalendar_dhx_terrace {
  z-index: 999999 !important;
}

gantt.config.lightbox.sections = [
{name: “lm_actual_startdate”, map_to: “lm_actual_startdate”, type: “dhx_calendar”, skin: ‘’, date_format: ‘%Y %M %d’}
]

var calendar_init = function (id, data, date) {
  var obj = new dhtmlXCalendarObject(id);
  obj.setDateFormat(data.date_format ? data.date_format : '');
  obj.setDate(date ? date : (new Date()));
  //obj.hideTime();
  if (data.skin)
    obj.setSkin(data.skin);
  return obj;
};

gantt.form_blocks["dhx_calendar"]={
  render:function(sns){ //sns - the section's configuration object
    return "<div class='dhx_calendar_cont'><input type='text' readonly='false' id='calendar1'/></div>";
  },    
  set_value:function(node,value,task,data){
	  	var a = node._cal_date = calendar_init('calendar1', data, task.lm_actual_startdate);
    var a_click = a.attachEvent("onClick", function (date) {
      calendar.getFormatedDate("%d.%m.%Y", date);
    });

    var id = gantt.attachEvent("onAfterLightbox", function () {
      a.detachEvent(a_click);
      a.detachEvent(a_time_click);
      a.unload();
      
      a = null;
      this.detachEvent(id);
    });
		  document.getElementById('calendar1').value = a.getDate(true);
  },

  get_value:function(node,task){
    task.lm_actual_startdate = node._cal_start.getDate(false);
    return task;
  },
  focus:function(node){
      //node - an html object related to the html defined above
      //...code to set focus to the element...
  }
};
#2

Hi,
when the calendar is created in the Gantt, it wraps in the div element with the classes .dhtmlxcalendar_material.dhtmlxcalendar_in_input. For displaying it over the lightbox I used the value of z-index: 10002 since it is one more than the lightbox z-index value.
In order for the calendar to be displayed over the lightbox and to be editable, you should add the following code to CSS:

.dhtmlxcalendar_material.dhtmlxcalendar_in_input {
  z-index: 10002 !important;
}

So if you still have this issue, It will be helpful if you reproduce your scenario in our snippet tool (to reproduce your scenario, click the share button and send me the new link):
https://snippet.dhtmlx.com/5/a40beee82

1 Like
#3

@Ales

Thanks for your time and reply. I found out what I needed to change for it to work.

In the dhtmlxcalender.js file, I changed z-index from 99 to 100000

1 Like