Improved Month/Year Picker

2 posts, 0 answers
  1. Shane Milton
    Shane Milton avatar
    219 posts
    Member since:
    Dec 2003

    Posted 24 Nov 2009 Link to this post

    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
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 27 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top