JQuery datepicker: convert selection to ul

Question

I am using the jqery-ui datepicker component, however the month and year drop-down lists are select tags.

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

Any help would be appreciated - here is the starting jsFiddle with jquery-ui datepicker https://jsfiddle.net/GeekOnGadgets/wra3pcsv/

Answer 1

The following code may help you. You can see the result in 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 $selectElement.val($(this).val()); $selectElement.change(); }).each(function () { // Add the selectedValue class to the selected item if ($(this).val() == $selectElement.val()) { $(this).addClass('selectedValue'); } }); }; // Replace the month and year select elements var convertToDatePickerWithLists = function (inst) { setTimeout(function () { inst.dpDiv.addClass('datePickerWithLists'); convertToList(inst, 'ui-datepicker-month'); convertToList(inst, 'ui-datepicker-year'); }, 0); }; // Associate the datepicker to the text input element $("#datepicker").datepicker({ changeMonth: true, changeYear: true, beforeShow: function (input, inst) { // Modify the datepicker when it is initially displayed convertToDatePickerWithLists(inst); }, onChangeMonthYear: function (year, month, inst) { // Modify the datepicker every time the month/year is changed convertToDatePickerWithLists(inst); } }); 

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; } .dateList { display: inline-block; list-style: none; font-size: 12px; vertical-align: top; margin: 0px; padding: 8px 0px 0px 0px; text-align: center; width: 40%; } .dateListItem { line-height: 1.4em; cursor: pointer; } .dateListItem.selectedValue { background-color: black; color: white; } 

UPDATE

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

Answer 2

This solution is mainly based on a solution from @ConnorsFan (you have a vote from me for your solution), however if you want to have a solution based on jQuery ui selectmenu (so you can style everything based on jQuery ui themes), you can use this the code:

 const fullMonthNames = ['Janurary', 'Februbary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novermber', 'December']; function updateToSelectMenu() { $('.ui-datepicker-title select').selectmenu({ select: function(e) { $(this).trigger('change'); updateToSelectMenu(); } }) $('.ui-datepicker-title').append($('.ui-selectmenu-menu')); } $('#datepicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: this.todayButton, yearRange: '-80:+0', monthNamesShort: fullMonthNames, beforeShow: function() { setTimeout(function() { updateToSelectMenu() }, 0); }, onChangeMonthYear: function() { setTimeout(function() { updateToSelectMenu() }, 0); } }); 

selectmenu was added in jQuery ui v1.11, so make sure you are using the correct version.

Here is a working example:

 const fullMonthNames = ['Janurary', 'Februbary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novermber', 'December']; function updateToSelectMenu() { $('.ui-datepicker-title select').selectmenu({ select: function(e) { $(this).trigger('change'); updateToSelectMenu(); } }) $('.ui-datepicker-title').append($('.ui-selectmenu-menu')); } $('#datepicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: this.todayButton, yearRange: '-80:+0', monthNamesShort: fullMonthNames, beforeShow: function() { setTimeout(function() { updateToSelectMenu() }, 0); }, onChangeMonthYear: function() { setTimeout(function() { updateToSelectMenu() }, 0); } }); 

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ui-datepicker-month, .ui-datepicker-year { border: none; background-color: white; border-color: none; } #ui-datepicker-div .ui-selectmenu-menu, #ui-datepicker-div .ui-selectmenu-button{ width: 29%; font-size: 13px; } .ui-menu { max-height: 420px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> <p>Date: <input type="text" id="datepicker"></p>