2
請幫助.. 如何修改日曆擴展程序顯示在ajax日曆擴展程序中僅顯示月份和年份，我的意思是日曆視圖不是文本框文本格式，所以我只選擇特定年份的月份名稱。在ajax工具包日曆擴展程序中只顯示月和年
A
回答
5
在處理繼承頁面倔強的腳本經理，獲取有關我的javascript搪塞功能是不確定的，我終於結束了簡單的設置「默認視圖」，以「月」的HTML屬性上CalendarExtender像這樣：
<asp:CalendarExtender ID="dtPickerFrom" runat="server" CssClass="calendarClass" Enabled="true" Format="MMM-yy" PopupButtonID="imgcalendarFileDate" TargetControlID="TextBoxFileDate" DefaultView="Months">
</asp:CalendarExtender>
這裏是關聯的屬性及其選項：
結果：
2
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestOnlyChangeMonthAndSetDefaultDay.aspx.vb"
Inherits="SoluTest_CalendarUserControl.TestOnlyChangeMonthAndSetDefaultDay" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var cal1;
var cal2;
function pageLoad() {
cal1 = $find("calendar1");
cal2 = $find("calendar2");
modifyCalDelegates(cal1);
modifyCalDelegates(cal2);
}
function modifyCalDelegates(cal) {
//we need to modify the original delegate of the month cell.
cal._cell$delegates = {
mouseover: Function.createDelegate(cal, cal._cell_onmouseover),
mouseout: Function.createDelegate(cal, cal._cell_onmouseout),
click: Function.createDelegate(cal, function(e) {
/// <summary>
/// Handles the click event of a cell
/// </summary>
/// <param name="e" type="Sys.UI.DomEvent">The arguments for the event</param>
e.stopPropagation();
e.preventDefault();
if (!cal._enabled) return;
var target = e.target;
var visibleDate = cal._getEffectiveVisibleDate();
Sys.UI.DomElement.removeCssClass(target.parentNode, "ajax__calendar_hover");
switch (target.mode) {
case "prev":
case "next":
cal._switchMonth(target.date);
break;
case "title":
switch (cal._mode) {
case "days": cal._switchMode("months"); break;
case "months": cal._switchMode("years"); break;
}
break;
case "month":
//if the mode is month, then stop switching to day mode.
if (target.month == visibleDate.getMonth()) {
//this._switchMode("days");
} else {
cal._visibleDate = target.date;
//this._switchMode("days");
}
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
case "year":
if (target.date.getFullYear() == visibleDate.getFullYear()) {
cal._switchMode("months");
} else {
cal._visibleDate = target.date;
cal._switchMode("months");
}
break;
// case "day":
// this.set_selectedDate(target.date);
// this._switchMonth(target.date);
// this._blur.post(true);
// this.raiseDateSelectionChanged();
// break;
case "today":
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
}
})
}
}
function onCalendarShown(sender, args) {
//set the default mode to month
sender._switchMode("months", true);
changeCellHandlers(cal1);
}
function changeCellHandlers(cal) {
if (cal._monthsBody) {
//remove the old handler of each month body.
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
$common.removeHandlers(row.cells[j].firstChild, cal._cell$delegates);
}
}
//add the new handler of each month body.
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
$addHandlers(row.cells[j].firstChild, cal._cell$delegates);
}
}
}
}
function onCalendarHidden(sender, args) {
if (sender.get_selectedDate()) {
if (cal1.get_selectedDate() && cal2.get_selectedDate() && cal1.get_selectedDate() > cal2.get_selectedDate()) {
alert('The "From" Date should smaller than the "To" Date, please reselect!');
sender.show();
return;
}
//get the final date
var finalDate = new Date(sender.get_selectedDate());
var selectedMonth = finalDate.getMonth();
finalDate.setDate(1);
if (sender == cal2) {
// set the calender2's default date as the last day
finalDate.setMonth(selectedMonth + 1);
finalDate = new Date(finalDate - 1);
}
//set the date to the TextBox
sender.get_element().value = finalDate.format(sender._format);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
From :
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server"
Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox1" OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden">
</cc1:CalendarExtender>
To :
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender2" BehaviorID="calendar2" runat="server"
Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox2" OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
+2
雖然此鏈接可以回答這個問題，最好是在這裏有答案的主要部件，並提供鏈接以供參考。如果鏈接頁面更改，則僅鏈接答案可能會失效。 –
1
您可以簡單地將CalendarExtender的顯示模式更改爲月份。
步驟1.將OnClientShown事件添加到CalendarExtender即。
<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"
TargetControlID="txtMonth" OnClientShown="calendarShown">
</AjaxControlToolkit:CalendarExtender>
步驟2.處理的OnClientShown事件切換日曆即模式。
function calendarShown(sender, e) {
sender._switchMode("months", true);
}
7
顯示的OnClientShown函數需要做的不僅僅是切換模式。這是我工作的解決方案，它只顯示月份，您可以選擇月份，並只顯示文本框中顯示的月份和年份。
步驟1
<asp:CalendarExtender ID="calendar1" ClientIDMode="Static" runat="server"
TargetControlID="txtDate" Format="yyyy-MM"
DefaultView="Months" OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />
請注意：的ClientIDMode =靜態，默認視圖 =月和OnClientShown和附OnClientHidden事件。
您還可以將Format =「yyyy-MM」更改爲您希望的月份和年份格式。
步驟2
創建這些Javascript函數。如果沒有加載的JQuery做，更改$找到的document.getElementById從修改
<script type="text/javascript">
function onCalendarHidden() {
var cal = $find("calendar1");
if (cal._monthsBody) {
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
}
}
}
}
function onCalendarShown() {
var cal = $find("calendar1");
cal._switchMode("months", true);
if (cal._monthsBody) {
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
}
}
}
}
function call(eventElement) {
var target = eventElement.target;
switch (target.mode) {
case "month":
var cal = $find("calendar1");
cal._visibleDate = target.date;
cal.set_selectedDate(target.date);
//cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
}
}
</script>
+0
完美的解決方案，它爲我工作就像一個魅力。感謝您的解決方案。 –
相關問題
- 1. 在Ajax日曆擴展程序中僅顯示和選擇每年的月份
- 2. AJAX日曆擴展程序選擇月份和年份
- 3. ajax日曆擴展器月名顯示
- 4. ASP Ajax控制工具包日曆擴展程序顯示不正確
- 5. 如何在ajax日曆擴展程序中限制年份
- 6. 綁定ajax日曆擴展到特定的月份和年份只有
- 7. Ajax工具包日曆擴展不工作
- 8. Ajax工具包日曆擴展，會彈出兩次選擇
- 9. Django DateField的日曆只顯示月份和年份？
- 10. 日曆擴展工具刪除後，然後添加ajax工具包不工作
- 11. 如何將年份和月份的下拉列表插入到ajax日曆擴展程序控件中
- 12. ASP Ajax日曆擴展器和顯示時間
- 13. Ajax工具包ASP.NET（Visual Basic）不顯示日曆
- 14. 只使用年份和月份在Windows Phone工具包的DatePicker
- 15. Javascript月日曆只顯示幾周
- 16. 在日曆擴展程序中選擇特定月份作爲默認月份
- 17. UIDatePicker只顯示月和日
- 18. android：如何在android中的日曆日期中顯示月份和年份？
- 19. 只有年/月視圖的PyQt日曆
- 20. 展開Adam Shaw的完整日曆以顯示年份和月份
- 21. 回覆於ajax工具包模式彈出式擴展程序
- 22. 如何擴展Ajax控件工具包
- 23. 日曆擴展不正確顯示
- 24. Ajax日曆擴展程序結束日期
- 25. Django SelectDateWidget只顯示月份和年份
- 26. 的UIDatePicker顯示月和一年只
- 27. NgbDatepicker只顯示幾個月和幾年
- 28. RichFaces日曆：僅顯示月份和年份
- 29. Primefaces日曆組件僅顯示月份和年份
- 30. 如何獲取日曆上顯示的月份和年份
我進一步採用這種方法，使控件自動選擇所選月份的第一天，通過使用一些人在這裏制定的信息來抑制需要選擇一個月中的某一天：http://geekswithblogs.net/ aghausman /存檔/ 2009/05/31 /如何對節目和選擇，monthyear功能於日曆extender.aspx – panhandel