Geek asks and answers

DatePicker "changemonth" and "changeyear" options do not work in jqGrid edit form

I have a custom jqGrid editing form to have some fields that use jQuery DatePicker to populate them. I configured it as follows in the colModel option:

colModel: [
...
    { name: 'Column', editable: true, index: 'Column', width: width,
      align: "center", editrules: { integer: true, required: true }, 
      editoptions: { size: 5, dataInit: function (el) {
                     setTimeout(function () { 
                           SetDatepicker('input[name^="' + el.name + '"]'); 
                     }, 100);                
                   } },
      formoptions: { rowpos: 1 }
    },
...
],

This works because it expands the DatePicker calendar when you click on an input field.

Not the SetDatepicker function is as follows:

function SetDatepicker(control) {
    $.datepicker.setDefaults($.datepicker.regional['es']);

    $(control).datepicker({
        changeMonth: true,
        changeYear: true,
        monthNamesShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
    });
}

changeMonth changeYear true, DatePicker : , . , selects : . , , .

, jqGrid, DatePicker . , , jqGrid.

?

UPD

Firefox, IE9-7, Chrome.

UPD2

jsFiddle datepicker jqGrid : http://jsfiddle.net/rUkyF/

+5
3

. jqGrid, , jquery-ui div div. modal: true .

grid.jqGrid('editGridRow', rowID, {
    addCaption: "Agregar Proyecto",
    topinfo: "Introduzca los nuevos datos del proyecto.",
    viewPagerButtons: false,
    //modal: true,
    jqModal: true,
    saveicon: [true, "left", "ui-icon-disk"],
    closeicon: [true, "right", "ui-icon-close"],
    closeAfterEdit: true,
    resize: false,
    width: wWidth,
    reloadAfterSubmit: true
});

http://jsfiddle.net/rUkyF/70/

+8

, ,

SetDatepicker(el);


SetDatepicker('input[name^="' + el.name + '"]');

. jsFiddler . http://jsfiddle.net/rUkyF/7/ . .

2. , iJD . , modal: true jQuery Datepicker. , iJD , , , modal: true jqModal: false.

modal: true editGridRow, $.jgrid.viewModal, , modal: true ​​(. ) jQuery.jqm ($.fn.jqm), jqModal.js. L 'bind' jqm. , L (. ) keypress, keydown mousedown document > m, 

var m = function (e) {
    var h = H[A[A.length - 1]],
        r = (!$(e.target).parents('.jqmID' + h.s)[0]);
    if(r) f(h);
    return !r;
}

f

var f = function (h) {
    try {
        $(':input:visible', h.w)[0].focus();
    } catch (_) {}
}

, , modal: true , div '.jqmID' + h.s ( '.jqmID1'). , <input> (- f).

, jQuery UI (menus, datepicker ..), <body> (, Datepicker <div id="ui-datepicker-div">, <body>). .

modal: true, jQuery UI jqGrid.

, jqModal editGridRow true (. ). , jqModal: true , editGridRow. jqModal: false , jqModal.js editGridRow, modal: true . , HTML- . .

, $.extend($.jgrid.edit, {...}), jqModal :

$.extend($.jgrid.edit, {
    recreateForm: true,
    jqModal: false,
    closeAfterAdd: true,
    closeAfterEdit: true,
    ... // other less common settings
});

, .

3. , , jqGrid. 

m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},


m=function(e){
    var h=H[A[A.length-1]],
        r=(!$(e.target).parents('.jqmID'+h.s)[0]);
    if(r) {
        // e.target could be inside of element with absolute position like menu item
        // in the case parents call above will don't find the modal dialog
        // To fix the problem we verify additionally whether e.target is inside of
        // an element having the class 'jqmID'+h.s
        $('.jqmID'+h.s).each(function() {
            var $self = $(this), offset = $self.offset();
            if (offset.top <= e.pageY && e.pageY <= offset.top + $self.height() &&
                    offset.left <= e.pageX && e.pageX <= offset.left + $self.width()) {
                r = false; // e.target is do inside of the dialog
                return false; // stop the loop
            }
        });
        f(h);
    }
    return !r;
},

. modal: true, datepicker . , .

4: , 3 , (. ) jqGrid. > 4.4.5 .

+5

In your jsfiddle, you set attributes idwith a character #at the beginning. As far as I know, you should use only characters a-zA-Z_. At least in my experience, I had a lot of problems with this, mainly in IE.

After I removed this #(http://jsfiddle.net/tftd/gwC4F/1/), everything worked like a charm in the latest FF, Chrome, Opera and Safari.

+1
source

More articles:


All Articles