Question

我使用的是jquery-ui datepicker组件，但month和year下拉列表是select个标签。

我需要以select元素无法实现的方式设置它们，因此我想将它们转换为ul元素。

任何帮助都将不胜感激 - 这是一个jquery-ui datepicker https://jsfiddle.net/GeekOnGadgets/wra3pcsv/

的首发jsFiddle

Answer 1

以下代码可能对您有所帮助。您可以在此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);
    }
});

以下是各种类的CSS样式：

.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;
}

的更新

在讨论了GeekOnGadgets的具体需求后，代码和样式已经过调整，如this jsfiddle所示。

Answer 2

这个解决方案主要是基于@ConnorsFan的解决方案（你得到了我的解决方案）但是如果你想要一个基于jQuery的解决方案selectmenu（所以您可以根据jQuery ui的主题设置所有内容的样式），您可以使用以下代码：

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);
    }
});

在jQuery ui v1.11中添加了selectmenu，因此请确保使用正确的版本。

以下是一份工作样本：

＆＃13;

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);
   }
 });

＆＃13;

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; 
}

＆＃13;

<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>

＆＃13;

jQuery datepicker：将选择下拉列表转换为ul

2 个答案: