微軟的ajax tool kit有個CalendarExtender控制項可以很方便的產生萬年曆供user選取日期，
也能在後置程式碼中取得選取值。但如果想在前端js中取到選許的日期，就沒那麼容易了。經過努力爬文後，
其實可以透過CalendarExtender控制項中的OnClientDateSelectionChanged屬性，指定處理的function，
透過該function幫你取值。
以下範例是一textbox中有預設Date Now的值，另一textbox透過CalendarExtender選取日期，所選取的日期不可小於預設日期，否則便清空欄位
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function dateSelectionChanged(sender, args) {
selectedDate = sender.get_selectedDate();
var selectDate = new Date(selectedDate);
defaultDate = document.getElementById('<%=txtDefault.ClientID %>').value;
if (defaultDate > DateTrans(selectDate)) {
alert("選取的日期不可小於預設日期");
document.getElementById('<%=TextBox1.ClientID %>').value='';
return false;
}
}
//日期轉換成yyyy/MM/dd
function DateTrans(d) {
var jobQueue = [];
var yyyy = d.getFullYear();
var mm = d.getMonth() + 1;
if (mm < 10) mm = "0" + mm;
var dd = d.getDate();
if (dd < 10) dd = "0" + dd;
jobQueue.push(yyyy + "/" + mm + "/" + dd);
return jobQueue;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtDefault" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server"
Enabled="True" TargetControlID="TextBox1" OnClientDateSelectionChanged ="dateSelectionChanged">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
請先 登入 以發表留言。