Customizing datepicker

Question

How do i customize datepicker?

I need to add color description at the top
Display 2 months (i think it can be done with default function)
Add red unselectable dates with no number displayed (dates 26, 4 and 17 in sample)

Basically date picker looks like this now. Need it to be like this.

Suchit kumar · Answer 1 · 2015-11-23T12:07:53.370

You can try this:For themes visit here: http://jqueryui.com/themeroller/

use numberOfMonths like numberOfMonths: 2 to show two months together.

jQuery(document).ready(function() {
    var eventDates = {};
    eventDates[ new Date( '11/26/2015' )] = new Date( '11/26/2015' );
    eventDates[ new Date( '11/04/2015' )] = new Date( '11/04/2015' );
    eventDates[ new Date( '12/17/2015' )] = new Date( '12/17/2015' ); 
    // datepicker
    jQuery('#dates').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                 return [false, "event", highlight];
            } else {
                 return [true, '', ''];
            }
         },
       numberOfMonths: 2
    });
});

<link  href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html>
<head>
<style>
.event span { 
background-color: #ff69b4 !important;
background-image :none !important; 
color: #ff69b4  !important;
   pointer-events: none;
   cursor: default;
}


</style>
</head>
<body>


<table><tr>
<td><div style="height:20px !important;width:20px !important;background-color: #73AD21;border:solid gray 1px;"></div></td><td>available</td><td><div style="height:20px;width:20px;background-color: #FFC0CB;border:solid gray 1px;"></div></td><td>sold out</td></tr>
<tr><td colspan="4"><input type="text" id="dates"></td></tr>
</table>
</body>

</html>

score 0 · Answer 2 · edited May 23 '17 at 11:59

To add a legend with your color description at the top of the datepicker, please have a look at this answer
To display two months, you can initialize your datepicker with

$(".selector").datepicker({numberOfMonths: 2});
To use a red background for your unselectable disabled dates, you can use the following CSS:

.ui-datepicker td.ui-state-disabled>span{background:#ff0000;}
To hide the numbers of your unselectable disabled dates, you can either use

.ui-datepicker td.ui-state-disabled>span{color:#ff0000;}

or the technique from this answer

.ui-datepicker td.ui-state-disabled{text-indent:100%; white-space:nowrap; overflow:hidden;}

Customizing datepicker

2 Answers2