Hi,
We are using bootstrap datetimepicker in a column of grid and it is working fine. The only issue we are facing is if grid height is less then the picker opens and gets hide behind the parent (grid) container. Below is the colModel for same and attached is the screenshot of issue. Help us on this.
/*
Version Detials :
ParamQuery Pro v3.3.3
Bootstrap v3.3.6 (
http://getbootstrap.com)
bootstrap-datetimejs version : 4.7.14 (
https://github.com/Eonasdan/bootstrap-datetimepicker)
*/
var Colmodel = {
title: "Air Date*",
dataType: "date",
dataIndx: "airDate",
width: 80,
maxWidth: 80,
minWidth: 80,
halign: "center",
cls: 'camp_exp2',
filter: { type: 'textbox', condition: 'equal', init: pqDatePicker, listeners: ['change'] },
editor: {
type: 'textbox',
init: dateEditor,
},
validations: [{
type: 'regexp',
value: '^[0-9]{1,2}(?:\/|-)[0-9]{1,2}(?:\/|-)[0-9]{2,4}$',
msg: 'Not in MM/DD/YYYY format.'
},
{
type: ValidateAirDate,
msg: 'Air Date should be between project start and end date.'
}
]
};
var dateEditor = function(ui) {
var $inp = ui.$cell.find("input"),
grid = this,
validate = function(that) {
var valid = grid.isValid({
dataIndx: ui.dataIndx,
value: $inp.val(),
rowIndx: ui.rowIndx
}).valid;
if (!valid) {
that.firstOpen = false;
}
};
//initialize the editor
$inp
.on("input", function(evt) {
validate(this);
})
.datetimepicker({
format: 'MM/DD/YYYY',
extraFormats: ['MM/DD/YY', 'MM-DD-YYYY', 'MM-DD-YY'],
useCurrent: false,
minDate: flightStartDate,
maxDate: flightEndDate,
//defaultDate:'1970-01-01T06:00:00',
stepping: 15
})
}
function pqDatePicker(ui) {
var $this = $(this);
$this
.css({ zIndex: 3, position: "relative" })
.datepicker({
yearRange: "-20:+0", //20 years prior to present.
changeYear: true,
changeMonth: true,
//showButtonPanel: true,
onClose: function(evt, ui) {
$(this).focus();
}
});
}
function ValidateAirDate(obj) {
if (obj.value == null || obj.value == "") {
return true;
}
if (obj.value.length > 0) {
var currDate = moment(obj.value);
if (currDate.isValid() == false ||
currDate.isBefore(moment(flightStartDate)) || currDate.isAfter(moment(flightEndDate)))
return false;
else
return true;
} else {
return true;
}
}
