This is a migrated thread and some comments may be shown as answers.

Improved Month/Year Picker

1 Answer 61 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Shane Milton
Top achievements
Rank 2
Shane Milton asked on 24 Nov 2009, 06:35 PM
I had need to give a month/year picker and I found this post:

Unfortunately, it doesn't play nicely if the user tries to modify the dates to be something other than the first of the month either by the "Today" button or by typing into the textbox. Attached is some slightly modified script where I've made this work for a "From" and "To" field where it also nicely handles a user modifying (whether on purpose or by accident) the day of the month. This script standardizes on the first of the month at 00:00:00.

Again, keep in mind that this script is for a slightly different page than that demo but it should be clear how to purge the script for the second field.

    //override the onload event handler to change the picker after the page is loaded 
    Sys.Application.add_load(setCalendarTable); 
 
    function setCalendarTable() { 
 
        var picker1 = $find("<%= startDateField.ClientID %>"); 
        var picker2 = $find("<%= stopDateField.ClientID %>"); 
        var calendar1 = picker1.get_calendar(); 
        var calendar2 = picker2.get_calendar(); 
        var fastNavigation1 = calendar1._getFastNavigation(); 
        var fastNavigation2 = calendar2._getFastNavigation(); 
 
        $clearHandlers(picker1.get_popupButton()); 
        $clearHandlers(picker2.get_popupButton()); 
        picker1.get_popupButton().href = "javascript:void(0);"
        picker2.get_popupButton().href = "javascript:void(0);"
        $addHandler(picker1.get_popupButton(), "click"function() { 
            var textbox = picker1.get_textBox(); 
            //adjust where to show the popup table  
            var x, y; 
            var adjustElement = textbox; 
            if (textbox.style.display == "none"
                adjustElement = picker1.get_popupImage(); 
 
            var pos = picker1.getElementPosition(adjustElement); 
            x = pos.x; 
            y = pos.y + adjustElement.offsetHeight; 
 
            var e = { 
                clientX: x, 
                clientY: y - document.documentElement.scrollTop 
            }; 
            //synchronize the input date if set with the picker one 
            var date = picker1.get_selectedDate(); 
            if (date) { 
                calendar1.get_focusedDate()[0] = date.getFullYear(); 
                calendar1.get_focusedDate()[1] = date.getMonth() + 1; 
                calendar1.get_focusedDate()[2] = 1; // hardcode this to the first of the month. 
            } 
 
            $get(calendar1._titleID).onclick(e); 
 
            return false
        }); 
        $addHandler(picker2.get_popupButton(), "click"function() { 
            var textbox = picker2.get_textBox(); 
            //adjust where to show the popup table  
            var x, y; 
            var adjustElement = textbox; 
            if (textbox.style.display == "none"
                adjustElement = picker2.get_popupImage(); 
 
            var pos = picker2.getElementPosition(adjustElement); 
            x = pos.x; 
            y = pos.y + adjustElement.offsetHeight; 
 
            var e = { 
                clientX: x, 
                clientY: y - document.documentElement.scrollTop 
            }; 
            //synchronize the input date if set with the picker one 
            var date = picker2.get_selectedDate(); 
            if (date) { 
                calendar2.get_focusedDate()[0] = date.getFullYear(); 
                calendar2.get_focusedDate()[1] = date.getMonth() + 1; 
                calendar2.get_focusedDate()[2] = 1; // hardcode this to the first of the month. 
            } 
 
            $get(calendar2._titleID).onclick(e); 
 
            return false
        }); 
        $addHandler(picker1.get_textBox(), "change"function() { 
            var textbox = picker1.get_textBox(); 
            if (textbox.value != '') { 
                var date = new Date(textbox.value); 
                date.setDate(1); 
                date.setHours(0, 0, 0, 0); 
                picker1.set_selectedDate(date); 
            } 
        }); 
        $addHandler(picker2.get_textBox(), "change"function() { 
            var textbox = picker2.get_textBox(); 
            if (textbox.value != '') { 
                var date = new Date(textbox.value); 
                date.setDate(1); 
                date.setHours(0, 0, 0, 0); 
                picker2.set_selectedDate(date); 
            } 
        }); 
 
        fastNavigation1.OnOK = 
            function() { 
                var date = new Date(fastNavigation1.Year, fastNavigation1.Month, 1); 
                picker1.get_dateInput().set_selectedDate(date); 
                fastNavigation1.Popup.Hide(); 
            } 
        fastNavigation2.OnOK = 
            function() { 
                var date = new Date(fastNavigation2.Year, fastNavigation2.Month, 1); 
                picker2.get_dateInput().set_selectedDate(date); 
                fastNavigation2.Popup.Hide(); 
            } 
 
 
        fastNavigation1.OnToday = 
            function() { 
                var date = new Date(); 
                date.setDate(1); 
                date.setHours(0, 0, 0, 0); 
                picker1.get_dateInput().set_selectedDate(date); 
                fastNavigation1.Popup.Hide(); 
            } 
        fastNavigation2.OnToday = 
            function() { 
                var date = new Date(); 
                date.setDate(1); 
                date.setHours(0, 0, 0, 0); 
                picker2.get_dateInput().set_selectedDate(date); 
                fastNavigation2.Popup.Hide(); 
            } 
    }    
 

-Shane

1 Answer, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 27 Nov 2009, 08:03 AM
Hi Shane,

Thank you for sharing this approach with the community. I am sure that it will be useful.
I have updated your Telerik points for your involvement.

Best wishes,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Calendar
Asked by
Shane Milton
Top achievements
Rank 2
Answers by
Yavor
Telerik team
Share this question
or