jQuery datepicker:将选择下拉菜单转换为ul
jQuery datepicker: Convert select dropdown into ul
我使用jquery-ui日期拾取器组件,但是month
和year
下拉框是select
标签。
我需要以选择元素不可能的方式对它们进行样式设置,所以我想将它们转换为ul
元素。
任何帮助都将受到赞赏-这里是一个初学者jsFiddle jquery-ui日期拾取器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;
}
在讨论了GeekOnGadgets的特定需求之后,代码和样式已经按照本文所示进行了调整。
这个解决方案主要是基于@ConnorsFan的解决方案(你得到了我对你的解决方案的投票),但是如果你想有一个基于jQuery ui的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);
}
});
selectmenu
是在jQuery ui v1.11中添加的,所以请确保您使用正确的版本。
下面是一个工作示例:
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>
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- 如何将逗号分隔的列表转换为<ul>列表
- 如何将Array转换为<ul><李>以字母为标题的字母列表
- 在转换后的 UL 列表中添加选择选项
- JavaScript将缩进文本转换为HTML列表重复顶层<李>'s为<ul>'s
- 转换UL->li inot为同位素过滤菜单选择的列表
- 如何使用JQuery检测•符号并将它们转换为HTML ul
- 将 Jquery UI Sortable 转换为表而不是 ul
- 我有一个数据列表,我将其转换为 Ul 和 li 的列表,现在我希望这个列表在 JSP 中显示为树
- 如何将选择下拉列表转换为 ul 下拉列表
- 将数组对象转换为嵌套的 ul li 元素
- 将对象转换为ul-li元素
- 使用jQuery将多级UL转换为带optgroup的selectbox
- 将select转换为ul-li
- 如何将无序列表(UL,LI)转换为连续字符串
- 将带有onclick()的ul转换为带有onchange()的select
- jQuery datepicker:将选择下拉菜单转换为ul
- 将同一页面上的多个选择框转换为多个ul
- 定义我的导航的JSON有标题类型和类别类型;d希望转换为Javascript中的嵌套UL LI元素
- 将对象列表转换为嵌套UL不起作用