Aries' Blog

Freestyle technical blog

JQuery UI 1.12 Datepicker wrong position issue (and fix)

jQuery UI 1.12 has a Datepicker component, which renders under the text input box.

In some scenario, when the page is scrolled down, the Datepicker will appear in wrong position. It’s due to the scroll distance not catered.

Fortunately, the Datepicker has a beforeShow properties which accept a function to modify the Datepicker’s height. So we can fix the issue as below

1. Create function to fix the position

function setDatepickerPos(input, inst) {
        var rect = input.getBoundingClientRect();
        // use 'setTimeout' to prevent effect overridden by other scripts
        setTimeout(function () {
            var scrollTop = $("body").scrollTop();
    	    inst.dpDiv.css({ top: rect.top + input.offsetHeight + scrollTop });
        }, 0);
    }

2. Add the function to ‘beforeShow’ properties of Datepicker

$('#MyDatepicker').datepicker({
	dateFormat: "yy-mm-dd",
	changeMonth: true,
	changeYear: true,
	defaultDate: +0,
	inline: true,
	beforeShow: function (input, inst) { setDatepickerPos(input, inst) },
});

Prevent “Enter” button to submit form

When we have more than 1 submit button in a HTML form, we may want to disable the “Enter” button from triggering the default submit button. Below shows 2 ways to do it:

1. Using JavaScript

Detect “Enter” key on “Text” & “Password” input. This approach works on all major browsers (including I.E. 11)

Add below jQuery event handler in every page (put it in a global js file)

$("form.noEnterKeySubmit").find("input[type='text'], input[type='password']")
        .on('keyup keypress', function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });

Then mark the form with class noEnterKeySubmit

<form action="myAction" class="noEnterKeySubmit" method="post">
...

2. Using “disabled” submit button

As per HTML5 spec, the default button is the first submit button in a form. So we can effectively prevent “Enter” key form submitting by putting a disabled & hidden submit button as the first button in the form.

The advantage is no JavaScript needed, but the downside is this does not work on I.E. & Safari

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>