ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: rsgmedia on August 09, 2017, 03:13:43 pm

Title: Datetime Picker hiding behind parent container
Post by: rsgmedia on August 09, 2017, 03:13:43 pm

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;
    }
}

Title: Re: Datetime Picker hiding behind parent container
Post by: paramvir on August 09, 2017, 09:51:07 pm

From the screenshot, it appears datepicker is appended along with textbox instead of document, so add this css rule:

Code: [Select]

div.pq-grid
{
   overflow:visible;
}   


Title: Re: Datetime Picker hiding behind parent container
Post by: rsgmedia on August 10, 2017, 03:27:16 pm

Thanks. It worked well!!