GeekOnGadgets GeekOnGadgets - 1 month ago 4
CSS Question

jQuery datepicker: Convert select dropdown into ul

I am using the jquery-ui datepicker component however the

dropdowns are

I need to style them in ways that are not possible with select elements so I would like to convert them to

Any help would be appreciated - here is a starter jsFiddle with the jquery-ui datepicker


The following code may help you. You can see the result in this jsFiddle.

// Replace a select element by a ul element
var convertToList = function (inst, className) {
    var $selectElement = inst.dpDiv.find('.' + className);
    var $listElement = $('<ul class="{0} dateList"></ul>'.replace('{0}', className + '-list')).appendTo($selectElement.parent());
    $selectElement.children(' option').each(function () {
        // Replace each option of the select element by a li element
        $listElement.append('<li class="dateListItem" value="{0}">{1}</li>'.replace('{0}', $(this).val()).replace('{1}', $(this).text()));
    $listElement.find('.dateListItem').click(function () {
        // When an item is clicked, set the corresponding value in
        // the original select element and trigger the change event
    }).each(function () {
        // Add the selectedValue class to the selected item
        if ($(this).val() == $selectElement.val()) {

// Replace the month and year select elements
var convertToDatePickerWithLists = function (inst) {
    setTimeout(function () {
        convertToList(inst, 'ui-datepicker-month');
        convertToList(inst, 'ui-datepicker-year');
    }, 0);

// Associate the datepicker to the text input element
    changeMonth: true,
    changeYear: true,
    beforeShow: function (input, inst) {
        // Modify the datepicker when it is initially displayed
    onChangeMonthYear: function (year, month, inst) {
        // Modify the datepicker every time the month/year is changed

Here are the CSS styles for the various classes:

.datePickerWithLists .ui-datepicker-year,
.datePickerWithLists .ui-datepicker-month
    display: none; /* Hide the original select elements */

.datePickerWithLists .ui-datepicker-header
    height: 20em;
    background: #D0D0D0;

    display: inline-block;
    list-style: none;
    font-size: 12px;
    vertical-align: top;
    margin: 0px;
    padding: 8px 0px 0px 0px;
    text-align: center;
    width: 40%;

    line-height: 1.4em;
    cursor: pointer;

    background-color: black;
    color: white;


After discussing the specific needs of GeekOnGadgets, the code and style has been adapted as shown in this jsfiddle.