分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – jQuery datepicker：将选择下拉列表转换为ul，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我使用的是 jquery-ui datepicker组件,但月份和年份下拉列表是选择标签.

我需要以SELEct元素无法实现的方式设置它们,所以我想将它们转换为ul元素.

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

解决方法

以下代码可能对您有所帮助.你可以在这个 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;
}

updatE

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