Customize jQuery UI Datepicker

JavaScript
1

Hi everyone,

so I’m using the jQuery UI datepicker and have gone through the documentation but still cannot customize the calendar to my needs.

  1. I’m trying to disable the previous months – only the current and future months need to be shown.
  2. I’d like the past days in the current month to be “unselectable” - they should still be visible, perhaps of a lighter colour but they cannot be selected.

Please let me know if you can assist me with this.

Thank you.

<script type="text/javascript">
$(function() {
$( "#start" ).datepicker({
dateFormat: "DD, d MM, yy ",
numberOfMonths: 2,
showAnim: 'blind',
showOn: "both",
buttonImageOnly: true,
showButtonPanel: true
}).val ()
});
$(function() {
$( "#end" ).datepicker({
dateFormat: "DD, d MM, yy ",
numberOfMonths: 2,
showAnim: 'blind',
showOn: "both",
buttonImageOnly: true,
showButtonPanel: true
}).val ()
});
</script>
2

Take a look at the minDate attribute. That will allow you to prevent past dates from being selected in the datepicker.

http://api.jqueryui.com/datepicker/#option-minDate

3

Thanks Force Flow,

I got the minDate working, not so difficult after all.

Now I’d like to display some default text (placeholder text) in the input such as “check-in”, which disappears when the input is clicked or when the input receives the dates from the datepicker.

Does anyone know how this can be done?

Thank you!

4

Hi RedBishop,

Can’t you just use HTML5’s placeholder attribute, or am I missing something?

5

There’s a defaultDate attribute. Is that what you’re looking for?

http://api.jqueryui.com/datepicker/#option-defaultDate

Or are you looking for something to give the user a clue as to what the field is for? You may need to use a HTML label tag with a “for” attribute. The “for” attribute is to connect the label field with the input. So, when a user clicks on the label, their cursor automatically focuses in the field with that ID.


<label for="mydate">Select Date:</label><input type="text" id="mydate">
6

Hi Pullo and Force Flow,

please excuse the late reply - I didn’t know that I had received more replies to my thread.

Can’t you just use HTML5’s placeholder attribute, or am I missing something?

I’m using HTML 4 so not sure if that would work.

Or are you looking for something to give the user a clue as to what the field is for?

Yes, something like “check-in”, and perhaps I can save some space instead of having a label before the input field.

A bigger problem I found is that it’s possible to select a starting date such as 1 March 2014 and then an end date such as 20 January 2014, which clearly won’t work…

7

Hi RedBishop,

Could you make a JSfiddle or post a link to a page where we can see this in action.
I’m sure this won’t be too difficult to sort out :slight_smile:

8

use the onSelect method. Then, for the starting date, when it is selected, set date as the minDate for the ending date. For the ending date, when it is selected, set the maxDate for the starting date.

9

Thanks Force Flow,

will give it a try.