Saturday, April 2, 2011

Calender Extender and weekly dates

 I was using this with a ajax calender extender.
You have to use the OnClientDateSelectionChanged event fired on the client and pass the sender and args like

<ajaxToolKit:CalendarExtender ID="CalendarExtender1" 
TargetControlID="txtWeek"  runat="server" PopupButtonID=imgBtnCalWeek 
OnClientDateSelectionChanged =foo FirstDayOfWeek=Monday >
</ajaxToolKit:CalendarExtender>

and the javascript

function foo(sender, args)
{
  var selectedDate = new Date();
  selectedDate = sender._selectedDate;
  alert(selectedDate);
}

you can also do document.getElementById('txtweek').value;
to get the date selected but I guess you need to convert the text into date before moving ahead.

Anyway here I was, thinkin of a login to find monday of any selected week,
and then I found http://www.datejs.com/ this stuff is awesome!
download just one .js file and include it in your project and we're done.
Then you get loads of Date functions see the Example Usage  here http://code.google.com/p/datejs/
it doesn't get simpler....
finding 'monday' of the selected week is as simple as Date.today().last().monday()

and so I wrote this but I tried the normal way first, so I did the Date.getDay(); method available already.

the aspx

<asp:TextBox ID=txtWeek runat=server ReadOnly=true Width=220></asp:TextBox>
&nbsp;&nbsp;
   <asp:ImageButton runat="Server" ID="imgBtnCalWeek"ImageUrl="~/Calendar_scheduleHS.png"
AlternateText="Click to show calendar"/>
   <ajaxToolKit:CalendarExtender ID="CalendarExtender1" 
TargetControlID="txtWeek"  runat="server" PopupButtonID=imgBtnCalWeek 
OnClientDateSelectionChanged =getWeek FirstDayOfWeek=Monday 
PopupPosition=BottomRight ></ajaxToolKit:CalendarExtender>

JavaScript

function getWeek(sender, args) {
            var startDate = new Date();
            var endDate = new Date();
            var selectedDate = new Date();
            selectedDate = sender._selectedDate;
            var d = getDayString(selectedDate.getDay());
            switch (d.toString()) {
                case "Sunday":
                    startDate = selectedDate.addDays(-6);
                    endDate = selectedDate;
                    break;
                case "Monday":
                    startDate = selectedDate;
                    endDate = selectedDate.addDays(6);
                    break;
                case "Tuesday":
                    startDate = selectedDate.addDays(-1);
                    endDate = selectedDate.addDays(5);
                    break;
                case "Wednesday":
                    startDate = selectedDate.addDays(-2);
                    endDate = selectedDate.addDays(4);
                    break;
                case "Thursday":
                    startDate = selectedDate.addDays(-3);
                    endDate = selectedDate.addDays(3);
                    break;
                case "Friday":
                    startDate = selectedDate.addDays(-4);
                    endDate = selectedDate.addDays(2);
                    break;
                case "Saturday":
                    startDate = selectedDate.addDays(-5);
                    endDate = selectedDate.addDays(1);
                    break;
                default:
                    selectedDate = new Date();

            }
            var link1 = startDate.addDays(-7);
            var link2 = startDate.addDays(-1);
            var link3 = endDate.addDays(1);
            var link4 = endDate.addDays(7);
            document.getElementById('txtWeek').value = startDate.toDateString() + " to " + endDate.toDateString();
         
        }
and
function getDayString(num) {
            var day;    //Create a local variable to hold the string
            switch (num) {
                case 0:
                    day = "Sunday";
                    break;
                case 1:
                    day = "Monday";
                    break;
                case 2:
                    day = "Tuesday";
                    break;
                case 3:
                    day = "Wednesday";
                    break;
                case 4:
                    day = "Thursday";
                    break;
                case 5:
                    day = "Friday";
                    break;
                case 6:
                    day = "Saturday";
                    break;
                default:
                    day = "Invalid day";
            }
            return day;
        }

and this is the function to add days

Date.prototype.addDays = function (days) {
            var dat = new Date(this.valueOf())
            dat.setDate(dat.getDate() + days);
            return dat;
        }

I got it from here http://stackoverflow.com/questions/563406/add-days-to-datetime-using-java-script
from a js guru.

No comments:

Post a Comment