All,
I have this page,
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="priceLists.aspx.cs" Inherits="PriceWorx.priceLists" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs({ collapsible: true });
$("#tabs").tabs({ event: "mouseover" });
$('#datepicker').datepicker({
minDate: "0",
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- all tabs -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<!-- tab definitions -->
<ul>
<li><a href="#tabs-1" class="dynamic">foo</a></li>
<li><a href="#tabs-2">bar</a></li>
</ul>
<div id="tabs-1" style="width: 100%;">
<div>
<p>
Date:
<input type="text" id="datepicker" /></p>
</div>
</div>
<div id="tabs-2">
<table style="width: 100%;">
<tr valign="top" align="center">
<td style="width: 100%;" colspan="4">
bar
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
The Tabing works fine , but not the Datepicker
The current version of jQuery UI is 1.8.9. Just change this line:
Working here: http://jsfiddle.net/9XC67/