Saludos a todos:
Tengo un inconveniente con el despliegue de un datepicker que se encuentra dentro de un UpdatePanel. Al iniciar la pagina esta carga bien el calendario (días en español y meses igual) pero al momento de generar un postback los calendarios pierden este formato y ademas se posicionan en la parte superior del textbox que esta asignado a este. dejo el siguiente código html:
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Reporte.aspx.vb" Inherits="Reporte" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Toolkit" %>
<%@ Register Src="~/Control/ctrMenu.ascx" TagPrefix="uc1" TagName="ctrMenu" %>
<%@ Register Src="~/Control/ctrMensaje.ascx" TagPrefix="uc1" TagName="ctrMensaje" %>
<%@ Register Src="~/Control/ctrFooter.ascx" TagPrefix="uc1" TagName="ctrFooter" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-datepicker.js"></script>
<script src="Scripts/bootstrap-datepicker.es.min.js"></script>
<script type="text/javascript" src="Scripts/Valida.js"></script>
<script src="Scripts/sweetalert2.js"></script>
<link href="Styles/bootstrap.css" rel="stylesheet" />
<link href="Styles/font-awesome.css" rel="stylesheet" />
<link href="Styles/sweetalert2.css" rel="stylesheet" />
<link href="Styles/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="Styles/Loading.css" rel="stylesheet" />
<style type="text/css">
body
{
padding-top: 30px;
}
.row
{
padding-bottom: 3px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('#txtFechaInicio').datepicker();
$('#txtFechaInicio').removeClass('form-control input-sm datepicker');
$('#txtFechaInicio').addClass('form-control input-sm datepicker');
}
});
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/lte-ie7.js"></script>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<Toolkit:ToolkitScriptManager runat="server" ID="scriptManager" EnableScriptGlobalization="true" />
<uc1:ctrMenu runat="server" ID="ctrMenu" />
<asp:UpdatePanel runat="server" ID="udpPrincipal">
<ContentTemplate>
<div id="container" class="container">
<ol class="breadcrumb">
<li>
<asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>
<li class="active">Reportes </li>
</ol>
<div class="row">
<div class="col-xs-12 col-md-12">
<div id="filter-panel" class="filter-panel">
<div class="panel panel-primary">
<div class="panel-heading">
Filtros de Búsqueda</div>
<div class="panel-body">
<div class="row">
<label class="col-md-2 control-label" for="Tipo Accion">
Modulo</label>
<div class="col-md-4">
<asp:DropDownList ID="ddlModulo" runat="server" AutoPostBack="true" CssClass="form-control input-sm"
rel="tooltip" data-placement="bottom" title="Modulo" Width="240px">
</asp:DropDownList>
</div>
<label class="col-md-2 control-label" for="Tipo Accion">
Sucursal</label>
<div class="col-md-4">
<asp:DropDownList ID="ddlOficina" runat="server" CssClass="form-control input-sm"
rel="tooltip" data-placement="bottom" title="Sucursal" Width="240px">
</asp:DropDownList>
</div>
</div>
<div class="row">
<label class="col-md-2 control-label" for="Tipo Accion">
Tipo de Fecha</label>
<div class="col-md-4">
<asp:RadioButtonList ID="rblTipoFecha" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Text="Curse" Value="1" style="margin-right:50px;"></asp:ListItem>
<asp:ListItem Text="Gestión" Value="2"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div class="row">
<div class="form-group form-inline ">
<label class="col-md-2 control-label" for="Fecha Inicio">
Fecha Registro Desde</label>
<div class="col-md-4">
<div class="input-group">
<asp:TextBox ID="txtFechaInicio" runat="server" CssClass="form-control input-sm datepicker"
onkeypress="return permite(event, 'fecha')" Width="205px"></asp:TextBox><span class="input-group-addon input-sm"><i
class="fa fa-lg fa-calendar"></i></span>
</div>
</div>
<label class="col-md-2 control-label" for="Fecha Fin">
Hasta</label>
<div class="col-md-4">
<div class="input-group">
<asp:TextBox ID="txtFechaFin" runat="server" CssClass="form-control input-sm datepicker"
onkeypress="return permite(event, 'fecha')" Width="205px"></asp:TextBox><span class="input-group-addon input-sm"><i
class="fa fa-lg fa-calendar"></i></span>
</div>
</div>
</div>
</div>
<asp:Label runat="server" ID="lblFechas" ForeColor="Red"></asp:Label>
</div>
<div class="panel-footer">
<div class="row">
<asp:Table ID="Table1" Style="float: none; margin: 0 auto;" runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:LinkButton runat="server" ID="btoBuscar" OnClick="btoBuscar_Click" CssClass="btn btn-info btn-sm"><i class="fa fa-search fa-lg"></i> Buscar</asp:LinkButton>
<asp:LinkButton runat="server" ID="btoLimpiar" OnClick="btoLimpiar_Click" CssClass="btn btn-default btn-sm"
><i class="fa fa-eraser fa-lg"></i> Limpiar</asp:LinkButton>
</asp:TableCell></asp:TableRow>
</asp:Table>
</div>
</div>
</div>
</div>
<asp:LinkButton runat="server" ID="btnExportar" CssClass="btn btn-success btn-sm pull-right " Visible="false"
OnClick="btoExportar_Click"><i class="fa fa-file-excel-o fa-lg"></i> Exportar a Excel </asp:LinkButton>
</div>
</div>
<asp:UpdatePanel runat="server" ID="updPanel">
<ContentTemplate>
<uc1:ctrMensaje runat="server" ID="ctrMensaje" Visible="false" />
<div class="row">
<div class="col-md-12 col-xs-12">
<asp:GridView runat="server" ID="Grilla" CssClass="table table-bordered table-condensed table-hover"
AutoGenerateColumns="false" AllowPaging="true"
PageSize="5">
<Columns>
<asp:BoundField HeaderText="Modulo" DataField="MODULO" />
<asp:BoundField HeaderText="Monto Promedio Cursado" DataField="MONTO_PROMEDIO" />
<asp:BoundField HeaderText="Suma Monto Cursado" DataField="SUMA_MONTO" Visible="false" />
<asp:BoundField HeaderText="N° Curses" DataField="CANTIDAD_CURSADAS" />
<asp:BoundField HeaderText="N° Gestiones" DataField="CANTIDAD_GESTIONES" />
<asp:BoundField HeaderText="% Gestion" DataField="PORCENTAJE_GESTION" />
</Columns>
</asp:GridView>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<asp:GridView runat="server" ID="GrillaOficina" CssClass="table table-bordered table-condensed table-hover"
AutoGenerateColumns="false" AllowPaging="true" OnRowDataBound="grdRegistros_RowDataBound"
PageSize="5">
<Columns>
<asp:BoundField HeaderText="Modulo" DataField="MODULO" />
<asp:BoundField HeaderText="Oficina" DataField="OFICINA" />
<asp:BoundField HeaderText="Monto Promedio Cursado" DataField="MONTO_PROMEDIO" />
<asp:BoundField HeaderText="Suma Monto Cursado" DataField="SUMA_MONTO" Visible="false" />
<asp:BoundField HeaderText="N° Curses" DataField="CANTIDAD_CURSADAS" />
<asp:BoundField HeaderText="N° Gestiones" DataField="CANTIDAD_GESTIONES" />
<asp:BoundField HeaderText="% Gestion" DataField="PORCENTAJE_GESTION" />
</Columns>
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="udpPrincipal">
<ProgressTemplate>
<div class="overlay" />
<div class="overlayContent">
<h2>Buscando Resultados...</h2>
<img src="Images/Consultando.gif" alt="buscando" border="1" height="170px" width="170px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<uc1:ctrFooter runat="server" ID="ctrFooter" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Se entiende que debo registrar nuevamente el HTML de los datepicker cuando este efectua el postback, lo que no logro aun es mantener la misma posicion inicial del datepicker y además de su formato ya que despues del postback me muestra el calendario en ingles. Adjunto imagen donde indica la posición inicial y después en la posición que queda después del postback:
Posición después del Postback:
Cualquier sugerencia es bienvenida de todas maneras y quedo atento a su ayuda mientras sigo en búsqueda de datos que me ayuden a resolver este problema.