Hello, I would like support to add a calendar datepicker the tab because when I do it the traditional way the textbox does not show me anything panel.
thnks
http://www.aspsnippets.com/Articles/Simple-Bootstrap-Tabs-example.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonalTab.aspx.cs" Inherits="SIS_L1ML.SIS_RRHH.Mantenimientos.PersonalTab" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.nav-tabs a, .nav-tabs a:hover, .nav-tabs a:focus
{
outline: 0;
}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
</script>
<script >
$(function () {
$("#<%= txt_fecha_inicio.ClientID %>").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
});
});
$(function () {
$('.calendar').datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: "-110:+0" });
});
</script>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div id="form1" runat="server">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 700px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#informacion" aria-controls="informacion" role="tab" data-toggle="tab">I. Informacion Laboral
</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="informacion">
<div>
<table class="css_table">
<tr>
<td class="css_table_titulos" >Estatus:</td>
<td class="css_table_contenidos">
<asp:DropDownList ID="ddbo_estatus" runat="server" CssClass="DDDropDown">
<asp:ListItem Value="0">NO REGISTRADO</asp:ListItem>
<asp:ListItem Value="ACTIVO"></asp:ListItem>
<asp:ListItem Value="NO ACTIVO"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="css_table_titulos" >Fecha de Inicio:</td>
<td class="css_table_contenidos">
<asp:TextBox ID="txt_fecha_inicio" runat="server" CssClass="nix_text_calendar calendar"></asp:TextBox>
</td>
<td class="css_table_titulos" >Fecha de Cese:</td>
<td class="css_table_contenidos">
<asp:TextBox ID="txt_fecha_cese" runat="server" CssClass="nix_text_calendar calendar"></asp:TextBox>
</td>
</tr>
</table>
</asp:Content>