Of course I know that SELECT form elements are hard to style and/or modify beyond the basics.
Just out of curiosity, does anyone know of a one-off bootstrap (the one from twitter) solution that would allow me to affect the size of the SELECT and perhaps even apply a gradient that looks more like a bootstrap button (than the scratchy surface they have now).
I don't mind noodling around with the CSS myself, but I thought I'd ask around before re-inventing the wheel.
Any pointers, links or suggestions would be greatly appreciated.
You can use the jQuery plugin bootstrap-select:
https://developer.snapappointments.com/bootstrap-select/
It will turn your select into a bootstrap button dropdown
A bit late but maybe this can help http://blog.iamjamoy.com/docs/select.html
or this http://ivaynberg.github.com/select2/
The first one doesn´t work on IE, if you can fix it please provide.
jQuery(function($){
$('select').each(function(i, e){
if (!($(e).data('convert') == 'no')) {
//$(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
$(e).after('<div class="btn-group" id="select-group-' + i + '" />');
var select = $('#select-group-' + i);
var current = ($(e).val()) ? $(e).val(): ' ';
select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul class="dropdown-menu"></ul>');
$(e).find('option').each(function(o,q) {
select.find('.dropdown-menu').append('<li>' + $(q).text() + '</li>');
if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
});
select.find('.dropdown-menu a').click(function() {
select.find('input[type=hidden]').val($(this).data('value')).change();
select.find('.btn:eq(0)').text($(this).text());
});
$(e).remove();
}
});
});
Related
I am trying to append rows to a table using an array called searchResults. Everything works as expected until I introduce the jQuery UI dialog box. The problem is I need a new dialog box for each row in the first column. I'm pretty new to all of this so I'm pretty sure I'm using the index incorrectly at times. This is just to give you an idea of what I'm trying to accomplish. Any ideas how to do this correctly?
for (var i = 0; i < searchResults.length; i++)
{
$('#patientFileDialog[i]').dialog();
$'#openPFDialog[i]').click(function() {
$('#patientFileDialog[i]').dialog('open');
});
var dialog[i] = $(`<div id="patientFileDialog[i]" title="Patient File">${searchResults[i].patientWebLink}</div>`);
body.append('<tr>'+
`<td><button id="openPFDialog[i]">Click Here</button></td>` +
`<td>${searchResults[i].patientFirstName}</td>` +
`<td>${searchResults[i].patientLastName}</td>` +
`<td>${searchResults[i].patientDateOfBirth}</td>` +
`<td>${searchResults[i].patientDataPulseID}</td>` +
`<td>${searchResults[i].patientLaserFicheID}</td>` +
'</tr>')
}
After looking at your code a bit more I think I can see what you are trying to do. Working JSFiddle, with some faked searchResults so we can see it in action.
There are a few problems with the code in your question:
Using selectors like $('#patientFileDialog[i]') and $'#openPFDialog[i]') will try to match elements on the page with those IDs. AFAICT those don't actually exist yet, you are trying to create them.
var dialog[i] = ... sets up some divs as strings, but those are never added to the page;
As I mentioned in my comment, there are some syntax errors, maybe just typos and mixed up formatting here on SO;
Here's an updated version of the code. Notable changes:
Instead of adding an event handler for every individual openPFDialog button, it is better practice to add just one which matches them all. That single handler can then work out which button was clicked, and take the right action for just that one, not all of them. In this case if you have all your buttons use IDs that match openPFDialog-X, where X is a number, you can target anything matching that pattern (using a starts with selector, and find the X by removing the openPFDialog- part with replace.
There's an added complication with the above though. Selectors parsed at page load will only match elements that exist at that time. In this case, you're adding new elements to the page, and a selector defined at page load won't match them. The solution is to select instead some parent element which does exist at page load, and filter. This is called event delegation (search for the paragraph starting with "Delegated event handlers").
Working from what you have, I am guessing the patientFileDialogs you create should be placed inside some parent element which is not displayed on the page? That's what I've done.
Here's the code (and working JSFiddle):
var dialog, i;
// Single click handler for anything that starts with "openPFDialog-".
// Since those elements don't exist on the page yet, we need to instead
// select a parent object, say the body, and filter for clicks on our
// elements starting with our pattern
$('body').on('click', '[id^=openPFDialog]', function() {
// We need to find the "i"
i = $(this).attr('id').replace(/openPFDialog-/,'');
console.log('clicked on id', i);
$('#patientFileDialog-' + i).dialog();
});
for (var i = 0; i < searchResults.length; i++) {
// Create a new div with ID like "patientFileDialog-1", using the current
// search result
dialog = $('<div id="patientFileDialog-' + i + '" title="Patient File">' + searchResults[i].patientWebLink + '</div>');
// Add it to the page. I've use a div with ID dialogs which is hidden
$('#dialogs').append(dialog);
$('table').append('<tr>'+
'<td><button id="openPFDialog-' + i + '">Click Here</button></td>' +
'<td>' + searchResults[i].patientFirstName + '</td>' +
'<td>' + searchResults[i].patientLastName + '</td>' +
'<td>' + searchResults[i].patientDateOfBirth + '</td>' +
'<td>' + searchResults[i].patientDataPulseID + '</td>' +
'<td>' + searchResults[i].patientLaserFicheID + '</td>' +
'</tr>');
}
Update
One last suggestion - manipulating the DOM by adding/removing elements is slow. If you need to do that for each element in an array, it is best to avoid actually adding your content on each iteration, and rather just build up a string. Then once you're done iterating, just add the big single string, so you're chaning the DOM just once. Here's the basic changes needed to do that:
// Add some new variables to hold our big strings
var dialog, dialogs, row, rows, i;
// ... your code ...
for (var i = 0; i < searchResults.length; i++) {
// Create the dialog ...
dialog = ...
// Append it to our big string of all dialogs
dialogs += dialog;
// Same approach for rows
row = '<tr>'+ ... all that stuff
rows += row;
}
// Finished iterating, nothing added to DOM yet. Do it all at once::
$('#dialogs').append(dialogs);
$('table').append(rows);
Here is what I finally ended up having to do:
$(document).ready(function(){
if ($('[attr="searchResultsJson"]').length)
{
$('.approval-outer-wrap').prepend(drawTable());
$('.approval-outer-wrap').append('<div id="result-details" title="Search Result Detail"><p></p></div>')
}
$('body').on('click', '[id^=openPFDialog]', function() {
var result = $(this).parents('tr').data('result');
$('#result-details p').html(result.patientFirstName);
$('#result-details').dialog();
});
});
function drawTable(){
var table = $('<table id="search-results" />');
var header = $('<thead />');
table.append(header);
header.append('<tr><th>Patient File</th><th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Data Pulse ID</th><th>Laserfiche ID</th></tr>');
var body = $('<tbody />');
table.append(body);
var json = $('[attr="searchResultsJson"] [type="text"]').text();
var searchResults = JSON.parse(json);
for (var i = 0; i < searchResults.length; i++) {
body.append(`<tr data-result='${JSON.stringify(searchResults[i])}'>`+
`<td><button id="openPFDialog-` + i + `">🔍</button></td>` +
`<td>${searchResults[i].patientFirstName}</td>` +
`<td>${searchResults[i].patientLastName}</td>` +
`<td>${searchResults[i].patientDateOfBirth}</td>` +
`<td>${searchResults[i].patientDataPulseID}</td>` +
`<td>${searchResults[i].patientLaserFicheID}</td>` +
'</tr>');
}
return table;
}
Consider the following code.
function showPatientDialog(cnt){
$("#patient-file-dialog").html(cnt).dialog("open");
}
var d = $("<div>", {
id: "patient-file-dialog",
title: "Patient File"
})
.appendTo("body")
.dialog({
autoOpen: false
});
$.each(searchResults, function(i, result) {
var row = $("<tr>").appendTo(body);
$("<td>").appendTo(row).html($("<button>", {
id: "open-pdf-dialog-" + i
}).click(function() {
showPatientDialog(result.patientWebLink);
}));
$("<td>").appendTo(row).html(result.patientFirstName);
$("<td>").appendTo(row).html(result.patientLastName);
$("<td>").appendTo(row).html(result.patientDateOfBirth);
$("<td>").appendTo(row).html(result.patientDataPulseID);
$("<td>").appendTo(row).html(result.patientLaserFicheID);
});
i have column named type and its an enum
public enum CalcEnum
{
Created = 0,
Calculated = 1,
Imported = 2,
Edited = 3
}
I want to display a button based on the value of this field. Say if the value is created then i want to show a button in the grid. I have tried like this but its not working
#(Html.Kendo().Grid(Model.values)
.Name("Grid1")
.Columns(columns =>
{
columns.Bound(p => p.UserComments).Title("Comments");
columns.Bound(p => p.Type).Title("Type");
columns.Template(#<text></text>)
.ClientTemplate("#if(Type == '0') {#"
+ "View"
+ "#} else {#"
+ "Open"
+ "#} #").Title(string.Empty);
}
Any clues where im doing wrong ? Thanks
Here is a link to the templates overview.
Here is a similar question where an external function is called to do all the processing.
Here is a similar question to yours.
I am also not too sure why you have quotes on your 0.
I have performed the action client side and if you do this I believe you need to put 'data.' before your Model's property.
`#if(data.Type == 0)`
Try that OR check the links below to see the links to questions similar to yours.
I can't set up a project to test this at the moment but I can give you a quick look at how I have used it with a boolean (CanCanel).
columns.Template(#<text></text>).ClientTemplate(
"<button type='button' class='myRequestsViewRequest grid-btn grid-btn-primary' style='margin: 3px 15px 3px 0;'" +
"data-requestid='#= RequestId #' data-requesterdisplayname='#= RequesterDisplayName #'>View</button>" +
" #if (!(data.CanCancel)) " +
"{# <span class='grid-btn grid-btn-disabled'>Cancel</span> #} " +
"else {# <a class='grid-btn grid-btn-primary' href='" +
Url.Action("CancelRequest", "Home") +
"?requestId=#= RequestId #' " +
" onclick='return MyRequest_ConfirmCancel()'>Cancel</a> #}#")
.Title("Actions")
.Width(200);
})
What if you change the column value 'Type' in the condition as below
if(#=Type# == '0')
I have a JQM page that is inserted dynamically into the DOM and must be regenerated every time, as the data may change. The first time the page is displayed, everything works as it should, but if the user returns to this page later, I have the following rendering problem. Here is the list closed:
Here is the list open on the second viewing of the screen:
I've tried various combinations of $(id-selector).trigger('create'), .remove(), and .empty(), but nothing so far makes the page the second time work like it does on the first.
For what it's worth, since this seems to be a problem with JQM for which I am seeking a workaround, here's the code that builds this list:
var url_base_key = resource.url + '_base';
html += '<div data-role="collapsible-set" data-inset="false" id="per-back-issues">';
if (window.per_info.back_issues.length > 0){
html += '<br /><p><b>' + Label('label_back_issues') + '</b></p>';
for (var i = 0; i < window.per_info.back_issues.length; i++){
var group = window.per_info.back_issues[i];
if (group.issues.length > 0){
html += '<div data-role="collapsible" class="per_group" id="per-group-' + group.group + '"><h2 id="group-label-' + group.group + '">' + group.group + '</h2><ul data-role="listview">';
for(var j = 0; j < group.issues.length; j++){
var issue = group.issues[j];
var url_base = window.orgbase_api[url_base_key];
var url = url_base + issue.formats[0].file;
var id = resource.orgbaseapi_url + '-' + issue.year + '-' + issue.month + '-lit_menu_item';
var item = '<li class="per_item">' + GetPdfLink(resource.id, id, url, GetLongMonth('gregorian', issue.month)) + '</li>'
html += item;
}
html += '</ul></div>';
}
}
}
html += '</div>';
This content is wrapped in a JQM page container
<div id="newsletter" data-role="page" data-theme="b" data-content-theme="b">
<div data-role="header">
Back
<h1>Newsletter</h1>
Home
</div>
...
</div>
and added to the DOM every time with
var new_screen = $(html);
new_screen.appendTo($.mobile.pageContainer);
If I try to do a $('#newsletter').remove() before the appendTo(), the appendTo() doesn't work. I can't use an expand event to force the list to redraw itself because the event fires before the expansion happens.
Ok, the problem seems to be the use of new_screen.appendTo($.mobile.pageContainer) multiple times for the same id. I had tried to remove it using $('#' + id).empty().remove() if it already exists before the appendTo(), but I couldn't add it again (perhaps someone can help me understand why I can't do it this way). So I tried just updating the container if it already exists and that fixed the problem. I'd like to understand how adding the item multiple times led to the results I got.
if ($('#' + id).length > 0){
var html = script + body;
//update existing page container
$(id).html(html);
} else {
var html = '<div id="' + id + '" data-role="page" data-url="' + id
+ '" data-theme="' + theme + '" data-content-theme="' + theme + '" class="screen_section">'
+ script + body + '</div>';
var new_screen = $(html);
//add new page container to DOM
new_screen.appendTo($.mobile.pageContainer);
}
How can I add a country selection field to Jira?
I've posted the the answer hoping it will help others, as well as hearing your thought on it..
Add a test field and get it's ID, for example let's say it's "customfield_11111". Than add it the following description:
<script src="https://jira.com/getCountrySelect.js">
</script>
You can write the code directory in the description, but I found it easier to backup and update the scripts this way. Then, in you app-data folder create the file getCountrySelect.js (replace the fieldID with your filed id):
var fieldId = "customfield_11111";
AJS.$(document).ready(function() {
var country = AJS.$("#" + fieldId).val();
AJS.$("#" + fieldId).parent().append("<select class='select' id='" + fieldId + "' name='" + fieldId + "'></select>");
var select = AJS.$("select#" + fieldId);
select.append("<option>Afghanistan</option>");
select.append("<option>Albania</option>");
select.append("<option>Algeria</option>");
select.append("<option>Andorra</option>");
select.append("<option>Angola</option>");
select.append("<option>Antigua & Deps</option>");
select.append("<option>Argentina</option>");
select.append("<option>Armenia</option>");
select.append("<option>Australia</option>");
select.append("<option>Austria</option>");
select.append("<option>Azerbaijan</option>");
select.append("<option>Bahamas</option>");
select.append("<option>Bahrain</option>");
select.append("<option>Bangladesh</option>");
select.append("<option>Barbados</option>");
select.append("<option>Belarus</option>");
select.append("<option>Belgium</option>");
select.append("<option>Belize</option>");
select.append("<option>Benin</option>");
select.append("<option>Bhutan</option>");
select.append("<option>Bolivia</option>");
select.append("<option>Bosnia Herzegovina</option>");
select.append("<option>Botswana</option>");
select.append("<option>Brazil</option>");
select.append("<option>Brunei</option>");
select.append("<option>Bulgaria</option>");
select.append("<option>Burkina</option>");
select.append("<option>Burundi</option>");
select.append("<option>Cambodia</option>");
select.append("<option>Cameroon</option>");
select.append("<option>Canada</option>");
select.append("<option>Cape Verde</option>");
select.append("<option>Central African Rep</option>");
select.append("<option>Chad</option>");
select.append("<option>Chile</option>");
select.append("<option>China</option>");
select.append("<option>Colombia</option>");
select.append("<option>Comoros</option>");
select.append("<option>Congo</option>");
select.append("<option>Congo {Democratic Rep}</option>");
select.append("<option>Costa Rica</option>");
select.append("<option>Croatia</option>");
select.append("<option>Cuba</option>");
select.append("<option>Cyprus</option>");
select.append("<option>Czech Republic</option>");
select.append("<option>Denmark</option>");
select.append("<option>Djibouti</option>");
select.append("<option>Dominica</option>");
select.append("<option>Dominican Republic</option>");
select.append("<option>East Timor</option>");
select.append("<option>Ecuador</option>");
select.append("<option>Egypt</option>");
select.append("<option>El Salvador</option>");
select.append("<option>Equatorial Guinea</option>");
select.append("<option>Eritrea</option>");
select.append("<option>Estonia</option>");
select.append("<option>Ethiopia</option>");
select.append("<option>Fiji</option>");
select.append("<option>Finland</option>");
select.append("<option>France</option>");
select.append("<option>Gabon</option>");
select.append("<option>Gambia</option>");
select.append("<option>Georgia</option>");
select.append("<option>Germany</option>");
select.append("<option>Ghana</option>");
select.append("<option>Greece</option>");
select.append("<option>Grenada</option>");
select.append("<option>Guatemala</option>");
select.append("<option>Guinea</option>");
select.append("<option>Guinea-Bissau</option>");
select.append("<option>Guyana</option>");
select.append("<option>Haiti</option>");
select.append("<option>Honduras</option>");
select.append("<option>Hungary</option>");
select.append("<option>Iceland</option>");
select.append("<option>India</option>");
select.append("<option>Indonesia</option>");
select.append("<option>Iran</option>");
select.append("<option>Iraq</option>");
select.append("<option>Ireland {Republic}</option>");
select.append("<option>Israel</option>");
select.append("<option>Italy</option>");
select.append("<option>Ivory Coast</option>");
select.append("<option>Jamaica</option>");
select.append("<option>Japan</option>");
select.append("<option>Jordan</option>");
select.append("<option>Kazakhstan</option>");
select.append("<option>Kenya</option>");
select.append("<option>Kiribati</option>");
select.append("<option>Korea North</option>");
select.append("<option>Korea South</option>");
select.append("<option>Kosovo</option>");
select.append("<option>Kuwait</option>");
select.append("<option>Kyrgyzstan</option>");
select.append("<option>Laos</option>");
select.append("<option>Latvia</option>");
select.append("<option>Lebanon</option>");
select.append("<option>Lesotho</option>");
select.append("<option>Liberia</option>");
select.append("<option>Libya</option>");
select.append("<option>Liechtenstein</option>");
select.append("<option>Lithuania</option>");
select.append("<option>Luxembourg</option>");
select.append("<option>Macedonia</option>");
select.append("<option>Madagascar</option>");
select.append("<option>Malawi</option>");
select.append("<option>Malaysia</option>");
select.append("<option>Maldives</option>");
select.append("<option>Mali</option>");
select.append("<option>Malta</option>");
select.append("<option>Marshall Islands</option>");
select.append("<option>Mauritania</option>");
select.append("<option>Mauritius</option>");
select.append("<option>Mexico</option>");
select.append("<option>Micronesia</option>");
select.append("<option>Moldova</option>");
select.append("<option>Monaco</option>");
select.append("<option>Mongolia</option>");
select.append("<option>Montenegro</option>");
select.append("<option>Morocco</option>");
select.append("<option>Mozambique</option>");
select.append("<option>Myanmar, {Burma}</option>");
select.append("<option>Namibia</option>");
select.append("<option>Nauru</option>");
select.append("<option>Nepal</option>");
select.append("<option>Netherlands</option>");
select.append("<option>New Zealand</option>");
select.append("<option>Nicaragua</option>");
select.append("<option>Niger</option>");
select.append("<option>Nigeria</option>");
select.append("<option>Norway</option>");
select.append("<option>Oman</option>");
select.append("<option>Pakistan</option>");
select.append("<option>Palau</option>");
select.append("<option>Panama</option>");
select.append("<option>Papua New Guinea</option>");
select.append("<option>Paraguay</option>");
select.append("<option>Peru</option>");
select.append("<option>Philippines</option>");
select.append("<option>Poland</option>");
select.append("<option>Portugal</option>");
select.append("<option>Qatar</option>");
select.append("<option>Romania</option>");
select.append("<option>Russian Federation</option>");
select.append("<option>Rwanda</option>");
select.append("<option>St Kitts & Nevis</option>");
select.append("<option>St Lucia</option>");
select.append("<option>Saint Vincent & the Grenadines</option>");
select.append("<option>Samoa</option>");
select.append("<option>San Marino</option>");
select.append("<option>Sao Tome & Principe</option>");
select.append("<option>Saudi Arabia</option>");
select.append("<option>Senegal</option>");
select.append("<option>Serbia</option>");
select.append("<option>Seychelles</option>");
select.append("<option>Sierra Leone</option>");
select.append("<option>Singapore</option>");
select.append("<option>Slovakia</option>");
select.append("<option>Slovenia</option>");
select.append("<option>Solomon Islands</option>");
select.append("<option>Somalia</option>");
select.append("<option>South Africa</option>");
select.append("<option>Spain</option>");
select.append("<option>Sri Lanka</option>");
select.append("<option>Sudan</option>");
select.append("<option>Suriname</option>");
select.append("<option>Swaziland</option>");
select.append("<option>Sweden</option>");
select.append("<option>Switzerland</option>");
select.append("<option>Syria</option>");
select.append("<option>Taiwan</option>");
select.append("<option>Tajikistan</option>");
select.append("<option>Tanzania</option>");
select.append("<option>Thailand</option>");
select.append("<option>Togo</option>");
select.append("<option>Tonga</option>");
select.append("<option>Trinidad & Tobago</option>");
select.append("<option>Tunisia</option>");
select.append("<option>Turkey</option>");
select.append("<option>Turkmenistan</option>");
select.append("<option>Tuvalu</option>");
select.append("<option>Uganda</option>");
select.append("<option>Ukraine</option>");
select.append("<option>United Arab Emirates</option>");
select.append("<option>United Kingdom</option>");
select.append("<option>United States</option>");
select.append("<option>Uruguay</option>");
select.append("<option>Uzbekistan</option>");
select.append("<option>Vanuatu</option>");
select.append("<option>Vatican City</option>");
select.append("<option>Venezuela</option>");
select.append("<option>Vietnam</option>");
select.append("<option>Yemen</option>");
select.append("<option>Zambia</option>");
select.append("<option>Zimbabwe</option>");
AJS.$("input#" + fieldId).remove();
AJS.$('#' + fieldId + ' option:contains('+country+')').attr('selected', 'selected');
});
Hope it will help you too :)
I'm using jQuery UI 1.8 and I would like to hide the year from the user in both the popup and the textbox. Essentially instead of picking the day, month and year I want the user to just pick the day and month.
Hiding the year in the textbox is easy enough, the code shown below will do that. I'm stumped on how to hide the year from the popup - so it would say "April" instead of "April 2010".
$(function() {
$("#beginDateRange").datepicker({ dateFormat: 'mm/dd' });
});
<input type="text" name="beginDateRange" id="beginDateRange" />
Any help would be greatly appreciated.
I came across this thread in my search for a good way to do this, and here's what i came up with.
in my css i have a
.BirthdayDatePicker .ui-datepicker-year
{
display:none;
}
and this is how i set up my datepickers that i don't want to show the year on:
$('.DateTextBox.NoYear').datepicker({
beforeShow: function (input, inst) {
inst.dpDiv.addClass('BirthdayDatePicker');
},
onClose: function(dateText, inst){
inst.dpDiv.removeClass('BirthdayDatePicker');
}
});
basically i add the class just before it shows, and take it off when it hides it, so that other date pickers on the page arn't affected by it.
just incase anyone ever needs to hide the year only on specific pickers on a page and doesn't want to mess with the internals of jQuery.
I dont think this option is exposed va the api.
I belive that the easiest way is to change the stylesheet.
Change the ui-datepicker-year class to display: none
Another option would be to edit the source so it isnt rendered at all,
to do that you can remove this part of the code:
// year selection
if (secondary || !changeYear)
html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
else {
// determine range of years to display
var years = this._get(inst, 'yearRange').split(':');
var thisYear = new Date().getFullYear();
var determineYear = function(value) {
var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) :
(value.match(/[+-].*/) ? thisYear + parseInt(value, 10) :
parseInt(value, 10)));
return (isNaN(year) ? thisYear : year);
};
var year = determineYear(years[0]);
var endYear = Math.max(year, determineYear(years[1] || ''));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
html += '<select class="ui-datepicker-year" ' +
'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
'>';
for (; year <= endYear; year++) {
html += '<option value="' + year + '"' +
(year == drawYear ? ' selected="selected"' : '') +
'>' + year + '</option>';
}
html += '</select>';
}
I haven't tried removing the code but it should work.
I did try hiding it using css and that does work (in firefox anyway :) )
HTH
Very old question, but I just needed to do this myself and here's an alternate method that might be useful to somebody; a quick and dirty fix that will enable your other datepickers to continue working, provided you do NOT need the changeYear functionality is to set changeYear to true on the datepickers you DON'T want a year showing up, then add the CSS:
select.ui-datepicker-year { display:none }
VIKSME Hide year http://jsfiddle.net/tocv/e5cvA/
CSS
.ui-datepicker-year
{
display:none;
}
HTML
<div id="datepicker"></div>
</div>
JavaScript
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: false
});
});
The attribute
changeYear:false;
select.ui-datepicker-year { display:none }
sometimes change dropdown to span.<span></span>
So add this css code.
span.ui-datepicker-year { display:none }