Jquery ui 对话框MVC 2上的多个JQuery.datepicker

我当前正在运行以下代码：

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

$（文档）.ready（函数（）{
var updateDialog={
url:“”
，closeAfterAdd:true
，closeAfterEdit:true
，模态：真的
，余波形式：函数（formId）{
$（“#fecha_inicio”）.datepicker（{autoSize:true，shown:'both'，dateFormat:'dd/mm/yy'}）；
$（“#fecha_fin”）.datepicker（{autoSize:true，shown:'both'，dateFormat:'dd/mm/yy'}）；
}             
，onclickSubmit:function（参数）{
var ajaxData={}；
风险值列表=$（“#列表”）；
var selectedRow=list.getGridParam（“selrow”）；
rowData=list.getRowData（selectedRow）；
ajaxData={periodoNum:rowData.periodoId}；
返回数据；
}
，宽度：“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？”；
$（“#列表”）.jqGrid({
url:“”，
数据类型：“json”，
mtype:'获取'，
colNames:['Número'，'Desde Fecha'，'Hasta Fecha'，'Activo']，
colModel：[
{name:'periodoId'，index:'periodoId'，width:40，align:'left'，editable:false，editrules:{edithidden:false}，HiddedLG:true，Hidded:true}，
{name:'fecha_inicio'，index:'fecha_inicio'，formatter:'date'，datefmt:'d/m/Y'，width:100，align:'left'，可编辑：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'，可编辑：true，edittype:'text'，editoptions:{size:10，maxlength:10}，editrules:{required:true}，formoptions:{elmsuffix:'*}，
{name:'activo'，index:'activo'，width:100，align:'left'，edit:true，edittype:'checkbox'，editoptions:{value:'true:False}，editrules:{required:False}，
],
寻呼机：$（'listPager'），
rowNum:20，
行列表：[5,10,20]，
sortname:'id'，
巫师：“描述”，
viewrecords：是的，
imgpath:“/Content/ui lightness/Images”，
宽度：“900”，
高度：“400”，
ondblClickRow：函数（rowid、iRow、iCol、e）{
$（“#列表”）.editGridRow（rowid，prmGridDialog）；
}
}).navGrid（“#listPager”，
{
编辑：真，添加：真，删除：真，搜索：假，刷新：真
},
updateDialog，
updateDialog，
更新日志
);
});       

但当数据输入只能使用fecha_inicio的日期选择器时

---

我已经阅读了几个web示例，但没有找到解决方案，我做错了什么？

显然，故障点发生在

showOn: 'both'

当它被改为

showOn: 'button'

正确操作

阅读此问题后，我解决此问题