9

I want to show the dates of previous and next months on my datePicker. Just like this:

enter image description here

These dates should also be selectable. Is there any option in jQuery default datePicker or can I modify DatePicker to look like this?

2 Answers 2

31

This should do it:

<script>
    $(function() {
        $( "#datepicker" ).datepicker({
            showOtherMonths: true,
            selectOtherMonths: true
        });
    });
    </script>

check out : http://jsfiddle.net/fLveY/2/

0

As isJustMe mentioned this is just the way to do it. Heres a version with a little addon that i find quite useful. If you click on days of the next or previous month the datepicker automatically switches to that month:

jQuery( '#datepicker' ).datepicker( {

    showOtherMonths: true,
    selectOtherMonths: true,

    onSelect: function( string, element ) {

        // Change month on click on other days

        var day  = element.selectedDay;
        var mon  = element.selectedMonth;
        var year = element.selectedYear;

        var target = jQuery( element.dpDiv ).find( '[data-year="'+year+'"][data-month="'+mon+'"]' ).filter( function() {

            return jQuery(this).text().trim() == day;

        } );

        if( target.hasClass( 'ui-datepicker-other-month' ) ) {

            if( parseInt( target.text().trim() ) > 15 ) {

                jQuery( element.dpDiv ).find( '.ui-datepicker-prev' ).click();

            } else {

                jQuery( element.dpDiv ).find( '.ui-datepicker-next' ).click();

            }

        }



    },

} );

Here a little thank you to adeneo and his answer for getting the current element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.