SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Customize jQuery UI Datepicker

    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.


    Code:
    <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. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi RedBishop,

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

    http://davidwalsh.name/html5-placeholder

  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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.

    HTML Code:
    <label for="mydate">Select Date:</label><input type="text" id="mydate">
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  6. #6
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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

  8. #8
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RedBishop View Post
    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...
    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.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  9. #9
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Force Flow,

    will give it a try.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •