//import these css
<link rel="stylesheet" href="jq/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jq/jquery-1.7.2.js"></script>
<script type="text/javascript" src="jq/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jq/ui/jquery.ui.datepicker.js"></script>
//1.normal case
<script type="text/javascript">
$(function() {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "calendar.gif", //the image you want to show
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd' //the date format
});
});
</script>
//2.the control is inside a gridview (or detailview...)
<script type="text/javascript">
$(function() {
$("input[id*=TBox_Name]").datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
});
</script>
//3.the control is inside a gridview (or detailview...) gridview inside updatepanel
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
//put these codes after ScriptManager-->key point!!!!!!!
<script type="text/javascript">
// if you use jQuery, you can load them when dom is read.
$(document).ready(function() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// Place here the first init of the DatePicker
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
});
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the DatePicker
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
}
</script>
</script>
留言列表