jQuery date picker widget

Richard Korts
Richard Korts used Ask the Experts™
on
Looking for a jQuery based date calendar widget that can be tied to a text box on a form. I am using https://api.jqueryui.com/datepicker/

It either lacks the functionality to prevent user from typing in gibberish as a date or I don't know how to configure it properly. I tried this:

$(function() {
            $("#datepickertd").datepicker({
			constrainInput: true}););
        });

Open in new window


I thought constrain input required a format mm/dd/yy (or whatever you pick as the default format). Constructed as in the code, it disables the functionality totally.

Happy with a fix for this or suggestion for another one that has this feature.

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Rikin ShahMicrosoft Dynamics CRM Consultant

Commented:
Hi,

You just need to add a readonly attribute-

<input type="text" name="datepicker" id="datepicker" readonly="readonly" />
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hi Richard,

The constrainInput property simply prevents the user typing in characters that aren't permitted. It doesn't mean that it will force the user to type in a valid date. Permitted characters are likely to be [0-9] and a slash, so they could still type in 123/456/789. It's not a valid date but it is using only permitted characters.

As @Rikin has said, if you want to prevent users typing directly into the field, then set it to readonly. FYI - readonly is just a boolean attribute and as such, you don't need to give it a value - just add the attribute:

<input type="text" id="datepickertd" name="datepickertd" readonly>

You said that the code you've provided prevents the functionality totally - that's because you have errors in that code - you have an extra ;) on the third line. It should be:

$(function() {
    $("#datepickertd").datepicker({
        constrainInput: true
    });
});

Open in new window

Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Perfect, that solves the issue.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial