I am using the jquery-ui datepicker ponent however the month
and year
dropdowns 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 a starter jsFiddle with the jquery-ui datepicker /
I am using the jquery-ui datepicker ponent however the month
and year
dropdowns 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 a starter jsFiddle with the jquery-ui datepicker https://jsfiddle/GeekOnGadgets/wra3pcsv/
Share Improve this question edited Sep 9, 2016 at 12:54 Hailwood 92.7k112 gold badges273 silver badges425 bronze badges asked Sep 8, 2016 at 5:24 GeekOnGadgetsGeekOnGadgets 9593 gold badges14 silver badges47 bronze badges 7-
Why you've not used
ui-datepicker-year
&ui-datepicker-month
class to apply style? – Divyang Desai Commented Sep 8, 2016 at 5:32 - Does not work, need hover of the select in different colour and other requirement, which is stuff to change with select. – GeekOnGadgets Commented Sep 8, 2016 at 5:34
- I add : .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ background: #ffff00; } .ui-state-default:hover, .ui-widget-content:hover .ui-state-default:hover, .ui-widget-header:hover .ui-state-default:hover{ background: #ff0000; } to your css and its work. I think you need call appropriate class as this calendar declare. Thanks – Amranur Rahman Commented Sep 8, 2016 at 6:55
- @AmranurRahman I think you misunderstood the question. I want to change the dropdown. – GeekOnGadgets Commented Sep 8, 2016 at 7:14
- 1 Cleaned up grammar and explained that the styles required cannot be done to a select as mentioned in the ments. – Hailwood Commented Sep 9, 2016 at 12:54
2 Answers
Reset to default 6 +50The following code may help you. You can see the result in this 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 has been adapted as shown in this jsfiddle.
This solution is mostly based on the solution by @ConnorsFan (you got a voteup from me for your solution), however if you want to have a solution based on the jQuery ui's selectmenu
(so you can style everything based on jQuery ui's themes) you can use this 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);
}
});
The
selectmenu
was added in jQuery ui v1.11 so make sure you use the correct version.
Here is a working sample:
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker"></p>