1
我有下面的代碼,以兩個日期符合下列條件比較阿賈克斯日曆日期範圍使用JavaScript
場景:
- 上載有兩個文本框(FROM日期,TODATE)與Ajax日曆擴展。
- On load From Date顯示今天的日期。
- 當在兩個文本框(FromDate,ToDate)中選擇了小於今天的日期時,它會提醒用戶說「您不能選擇比今天早的日子!」
- ToDate的選定日期< FromDate的選定日期,提醒用戶說「迄今必須大於起始日期」。並同時清除ToDate文本框中選定的日期。
碼塊:
ASP.NET,AJAX
<asp:TextBox ID="txtFrom" runat="server"
ReadOnly="true"></asp:TextBox>
<asp:ImageButton ID="imgBtnFrom" runat="server" ImageUrl="~/images/Cal20x20.png" Width="20" Height="20" ImageAlign="TextTop" />
<asp:CalendarExtender ID="txtFrom_CalendarExtender" PopupButtonID="imgBtnFrom"
runat="server" Enabled="True"
OnClientDateSelectionChanged="checkDate"
TargetControlID="txtFrom" Format="MMM d, yyyy">
</asp:CalendarExtender>
<asp:TextBox ID="txtTo" runat="server"
ReadOnly="true"></asp:TextBox>
<asp:ImageButton ID="imgBtnTo" runat="server" ImageUrl="~/images/Cal20x20.png" Width="20" Height="20" ImageAlign="TextTop" />
<asp:CalendarExtender ID="txtTo_CalendarExtender"
OnClientDateSelectionChanged="compareDateRange"
PopupButtonID="imgBtnTo"
runat="server"
Enabled="True" TargetControlID="txtTo"
Format="MMM d, yyyy">
</asp:CalendarExtender>
<asp:HiddenField ID="hdnFrom" runat="server" />
<asp:HiddenField ID="hdnTo" runat="server" />
C#代碼
protected void Page_Load(object sender, EventArgs e)
{
txtFrom.Text = string.Format("{0: MMM d, yyyy}", DateTime.Today);
if (Page.IsPostBack)
{
if (!String.IsNullOrEmpty(hdnFrom.Value as string))
{
txtFrom.Text = hdnFrom.Value;
}
if (!String.IsNullOrEmpty(hdnTo.Value as string))
{
txtTo.Text = hdnTo.Value;
}
}
}
JavaScript代碼
<script type="text/javascript">
function checkDate(sender, args) {
document.getElementById('<%=txtTo.ClientID %>').value = "";
if (sender._selectedDate < new Date()) {
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format));
//assign the value to the hidden field.
document.getElementById('<%=hdnFrom.ClientID %>').value = sender._selectedDate.format(sender._format);
//reset the to date to blank.
document.getElementById('<%=txtTo.ClientID %>').value = "";
} else {
document.getElementById('<%=hdnFrom.ClientID %>').value = sender._selectedDate.format(sender._format);
}
}
function compareDateRange(sender, args) {
var fromDateString = document.getElementById('<%=txtFrom.ClientID %>').value;
var fromDate = new Date(fromDateString);
if (sender._selectedDate < new Date()) {
alert("You cannot select a Date earlier than today!");
sender._selectedDate = "";
sender._textbox.set_Value(sender._selectedDate)
}
if (sender._selectedDate <= fromDate) {
alert("To Date must be Greater than From date.");
sender._selectedDate = "";
sender._textbox.set_Value(sender._selectedDate)
} else {
document.getElementById('<%=hdnTo.ClientID %>').value = sender._selectedDate.format(sender._format);
}
}
</script>
錯誤屏幕(哼哼:X)
現在TODATE,當您選擇的日期比現在或日期小於沒有fromdate早些時候,TODATE日曆顯示的NaN爲每個日期和,0NaN年
這行代碼究竟幹什麼? 'sender._textbox.set_Value(sender._selectedDate.format(sender._format))' – John