Improved Month/Year Picker

[Shane Milton]

I had need to give a month/year picker and I found this post:

http://www.telerik.com/community/code-library/aspnet-ajax/calendar/month-year-picker.aspx

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

[Yavor]

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.