2

I am replacing the default datepicker for the jquery picker and I have a Javascript code to handle that. I also have a keypress event when I go to the element with tab and press enter it show me the date picker, but in Chrome it does not work, when I press the enter key the event does not fire, and I press another key and it work.

Javascript code

//Datepicker jquery ui
        function ImproveDateTextBoxs() {
            $("img[id*=DatePickerImage]").closest(".ms-dtinput").remove();
            $(".ms-dtinput input[id$='Date']").each(function () {
                ImproveDate($(this));
                $($(this).next('img')).wrap($("<A/>").attr("href","#"));



            });
        }

        function ImproveDate(obj) {

//          obj.focus(function () { obj.select(); });

            if (typeof jQuery.ui.datepicker != "undefined") {
                obj.datepicker({
                    showOn: 'button',
                    buttonImage: '/_layouts/images/calendar.GIF',
                    buttonImageOnly: true,
                    showOtherMonths: true,
                        selectOtherMonths: true,
                    showButtonPanel: true,
                    changeMonth: true,
                    changeYear: true,
                    onClose: function() {
                        $(this).next('a').focus(); 
                    }               
                });
                obj.next('a').keypress(function (e) {
                 var key = e.which;
                 if(key == 13)  // the enter key code
                  {
//                  e.preventDefault();
//                  console.log("hola");
                    $(this).children().click();
                    return false;  
                  }
                });
//          obj.parent().next().children("a").removeAttr('onclick');
//          obj.parent().next().children("a").click(function () { obj.select(); });
            }
        }

        $(document).ready(function () {
            ImproveDateTextBoxs()
        });
2

Chrome does not respond to enter key because this event is associate to the href attribute, so I put my javascript inside the href

//Datepicker jquery ui
        function ImproveDateTextBoxs() {
            $("img[id*=DatePickerImage]").closest(".ms-dtinput").remove();
            $(".ms-dtinput input[id$='Date']").each(function () {
                ImproveDate($(this));
                var idAnchor = $(this).attr('id') + "Anchor";
                $($(this).next('img')).wrap("<a id='" + idAnchor + "' href='javascript:openJqueryCalendar(\"" + idAnchor + "\");'></a>");
            });
        }

        function openJqueryCalendar(element) {
            $('#'+element).children().click();
        }

        function ImproveDate(obj) {     
            if (typeof jQuery.ui.datepicker != "undefined") {
                obj.datepicker({
                    showOn: 'button',
                    buttonImage: '/_layouts/images/calendar.GIF',
                    buttonImageOnly: true,
                    showOtherMonths: true,
                        selectOtherMonths: true,
                    showButtonPanel: true,
                    changeMonth: true,
                    changeYear: true,
                    onClose: function() {
                        $(this).next('a').focus(); 
                    }               
                });
            }
        }

        $(document).ready(function () {
            ImproveDateTextBoxs()
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.