Question

I am currently running the following code:

<script type="text/javascript">
$(document).ready(function() {
    var updateDialog = {
        url: '<%= Url.Action("ABM", "Periodo") %>'
            , closeAfterAdd: true
            , closeAfterEdit: true
            , modal: true
            , afterShowForm: function(formId) {
                $("#fecha_inicio").datepicker({ autoSize: true, showOn: 'both', dateFormat: 'dd/mm/yy' });
                $("#fecha_fin").datepicker({ autoSize: true, showOn: 'both', dateFormat: 'dd/mm/yy' });
            }             
            , onclickSubmit: function(params) {
                var ajaxData = {};
                var list = $("#list");
                var selectedRow = list.getGridParam("selrow");
                rowData = list.getRowData(selectedRow);
                ajaxData = { periodoNum: rowData.periodoId };
                return ajaxData;
            }
            , width: "400"
    };
    $.jgrid.nav.addtext = "Agregar";
    $.jgrid.nav.edittext = "Editar";
    $.jgrid.nav.deltext = "Borrar";
    $.jgrid.edit.addCaption = "Agregar Periodo";
    $.jgrid.edit.editCaption = "Editar Periodo";
    $.jgrid.del.caption = "Borrar Periodo";
    $.jgrid.del.msg = "Borrar el periodo seleccionado?";
    $("#list").jqGrid({
        url: '<%= Url.Action("List", "Periodo") %>',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Número', 'Desde Fecha', 'Hasta Fecha', 'Activo'],
        colModel: [
                { name: 'periodoId', index: 'periodoId', width: 40, align: 'left', editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                { name: 'fecha_inicio', index: 'fecha_inicio', formatter: 'date', datefmt: 'd/m/Y', width: 100, align: 'left', editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 10 }, editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                { name: 'fecha_fin', index: 'fecha_fin', formatter: 'date', datefmt: 'd/m/Y', width: 100, align: 'left', editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 10 }, editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                { name: 'activo', index: 'activo', width: 100, align: 'left', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, editrules: { required: false} },
                ],
        pager: $('#listPager'),
        rowNum: 20,
        rowList: [5, 10, 20],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/Content/ui-lightness/Images',
        width: "900",
        height: "400",
        ondblClickRow: function(rowid, iRow, iCol, e) {
            $("#list").editGridRow(rowid, prmGridDialog);
        }
    }).navGrid('#listPager',
            {
                edit: true, add: true, del: true, search: false, refresh: true
            },
            updateDialog,
            updateDialog,
            updateDialog
        );
});       
</script>

But when data entry is only possible using only the datepicker of fecha_inicio.

I have read several examples web, but could not find the solution, What am I doing wrong?

Answer 1

apparently the point of failure occurred with

showOn: 'both'

when it was changed to

showOn: 'button'

worked correctly