Is there a way in jQuery to to set the min/max for an <input> field of type date?

Hi:

I have an HTML5 input date control.

   <input id="StartDate"  type="date">

Open in new window


Is there a way to set the min/max values through jquery?

Thanks,
JohnB
LVL 1
jxbmaSoftware ConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OmniUnlimitedCommented:
Not sure if this is what you are looking for?

$('input#StartDate').blur(function() {
    var minDate = new Date("mm-dd-yyyy");
    var maxDate = new Date("mm-dd-yyyy");
    var compDate = new Date($(this).val());
    if (compDate.getTime() < minDate.getTime()) alert("Date is less than " + minDate + "."); 
    if (compDate.getTime() > maxDate.getTime()) alert("Date is greater than " + maxDate + ".");
});

Open in new window


substituting, of course, your dates for "mm-dd-yyyy".  This function will check the date each time the input box loses focus.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
Are you ok that the date field isn't supported in IE or Firefox?  Only supported in Chrome and Safari.

seeing as you're using jQuery have you considered using their datepicker?  http://jqueryui.com/datepicker/

in particular there is a demo on restricting the date range:

http://jqueryui.com/datepicker/#min-max

These jquery options will work for all major browsers
0
jxbmaSoftware ConsultantAuthor Commented:
tagit:

Yikes. I didn't realize that it wasn't universally supported.
We've got this defined a whole bunch of times.
For purposes of impending demo, we'll make sure that we run on Chrome.
If I take the DatePicker, I'll get the min/max for free.

Thanks for tip.
JB
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

jxbmaSoftware ConsultantAuthor Commented:
OmnitUnlimitted:

There isn't a way to specify min/max directly through jquery for HTML5 date control?
For demo purposes, we'll use the blur.

Thanks,
JB
0
OmniUnlimitedCommented:
By "not supported", tagit is simply referring to the fact that the field won't operate correctly in those browsers.  You will still see a standard text field, and it will still operate like a text field allowing user input and string comparisons through jQuery (like the one I set up.)

You can code min max dates right into the field (although as tagit pointed out, they won't be supported in IE and Firefox), and use jQuery to change those attributes, but it seems the best thing would be to set up a jQuery function to create the behavior you are looking for.
0
RobOwner (Aidellio)Commented:
Sounds like re inventing the wheel to me when the date picker from jQuery is available and restricts input to dates as well as a max and min value
0
jxbmaSoftware ConsultantAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for jxbma's comment #a39472402
Assisted answer: 250 points for OmniUnlimited's comment #a39472302
Assisted answer: 250 points for tagit's comment #a39472328

for the following reason:

You guys rock.
I've got demo in a day or two, so I'll just blur for now.
I'll switch to datepicker after demo.

Thanks,
JB
0
jxbmaSoftware ConsultantAuthor Commented:
You guys rock.
I've got demo in a day or two, so I'll just blur for now.
I'll switch to datepicker after demo.

Thanks,
JB
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.