Greetings to all:
I have a problem with the deployment of a datepicker that is inside an UpdatePanel. When you start the page, it loads the calendar well (days in Spanish and same months) but when generating a postback, the calendars lose this format and they are positioned in the upper part of the textbox that is assigned to it. I leave the following html code:
<%@ 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>It is understood that I must register again the HTML of the datepicker when it makes the postback, what I still can not do is keep the same initial position of the datepicker and also its format since after the postback it shows me the calendar in English. Attached image where indicates the initial position and then in the position that remains after the postback:
Initial Position:
Position after the Postback:
Any suggestion is welcome anyway and I remain attentive to your help as I continue to search for data to help me solve this problem.