我使用的是
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所示.
