Re: Calender Extender Control Query

Harry US11 — Fri, 07 Nov 2008 10:01:16 GMT

thanks jhi

i got it.

Re: Calender Extender Control Query

Zhi-Qiang Ni - MSFT — Thu, 06 Nov 2008 14:07:26 GMT

Hi,

Harry US11:
i want to know whether this calender extender takes the date of client side or server side??

I assume that you would like to know how to get the selected date of the CalendarExtender.

At the client side, we can find the selected date by using this code: $find("the Extender’s ID or BehaviorID”).get_selectedDate().

At the server side, the code is this: TextBox1_CalendarExtender.SelectedDate

Harry US11:
is there any alternative that i can choose alone the month and year selected from the textbox.text????

I have built a test application to achieve your goal about modify the Month separately, please refer to the code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestOnlyChangeMonth.aspx.vb"
    Inherits="SoluTest_CalendarUserControl.TestOnlyChangeMonth" %>

<%@ 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 cal;
        function pageLoad() {
            cal = $find("calendar1");
            //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 onCalendar1Shown(sender, args) {
            //set the default mode to month
            sender._switchMode("months", true);

            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 onCalendar2Change(sender, args) {
            if (!sender.get_selectedDate()) {
                var finalDate = new Date();
            } else {
                var finalDate = new Date(sender.get_selectedDate());
            }
            if ($get("TextBox1").value != "") {
                finalDate.setMonth(parseFloat($get("TextBox1").value) - 1);
            }
            sender.set_selectedDate(finalDate);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        The Month:<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server"
            Enabled="True" Format="MM" TargetControlID="TextBox1" OnClientShown="onCalendar1Shown">
        </cc1:CalendarExtender>
        The Day/The Year:
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender2" BehaviorID="calendar2" runat="server"
            Enabled="True" Format="dd/yyyy" TargetControlID="TextBox2" OnClientHidden="onCalendar2Change"
            OnClientShown="onCalendar2Change">
        </cc1:CalendarExtender>
    </div>
    </form>
</body>
</html>

Have my code helped?

You can also refer to this thread:http://forums.asp.net/t/1342779.aspx

Best regards,

Zhi-Qiang Ni

Re: Calender Extender Control Query

Harry US11 — Tue, 04 Nov 2008 07:05:12 GMT

also i want to know whether this calender extender takes the date of client side or server side??

And also for the above ques, is there any alternative that i can choose alone the month and year selected from the textbox.text????

Re: Calender Extender Control Query

Harry US11 — Tue, 04 Nov 2008 06:59:56 GMT

Thanks. But infact i want to use select statement on this

Eg. if selected month id between 10-12, and year is 2008

then put Q408 in next text box

how sholud i pick the month and year selected to use them further.

thankx

Re: Calender Extender Control Query

kashmirindotnet — Tue, 04 Nov 2008 05:23:59 GMT

Hi,

Set the Format property of Calendar Extender as:

<Ajax:CalendarExtender ID="CalendarExtender1" runat="server" Format="MMyy" TargetControlID="TextBox">

Hope this will help...

Calender Extender Control Query

Harry US11 — Tue, 04 Nov 2008 03:31:21 GMT

Hi,

how can i print only the month (and year) selected from a calender extender.

like if selected date is 11/04/2008. i just want to print 0408 in a text box.

is there any property to select only the month or year selected.???

can any1 help me on this???

ASP.NET AJAX Control Toolkit

Re: Calender Extender Control Query

Re: Calender Extender Control Query

Re: Calender Extender Control Query

Re: Calender Extender Control Query

Re: Calender Extender Control Query

Calender Extender Control Query