Multiple JQuery.datepicker on Dialog MVC 2 - jquery-ui

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