Yeah, the datepicker looks a little buggy with those options. I would use a normal short-text question and insert your own custom date picker to solve both problems.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// A class for this question
thisQuestion.addClass('custom-date-mmyy');
// Insert custom date picker
$('input[type="text"]', thisQuestion).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showOn: 'both',
dateFormat: 'mm/yy',
beforeShow: function(el, obj) {
// Hide the calendar display
$('#ui-datepicker-div').addClass('no-calendar');
},
onClose: function(dateText, inst) {
// Load the date input
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).blur();
// Reset the calendar display (for other questions)
setTimeout(function () {
$('#ui-datepicker-div').removeClass('no-calendar');
}, 100);
}
});
// Fix up the datepicker position
$('input[type="text"]', thisQuestion).on('click focus', function() {
$("#ui-datepicker-div").position({
my: "left top",
at: "left-3 top-3",
of: $(this)
});
});
// Fix up the buttons
$('.ui-datepicker-trigger', thisQuestion)
.text('Select')
.addClass('ui-state-default ui-corner-all custom-date-control select')
.after('<button class="ui-state-default ui-corner-all custom-date-control clear" type="button">Clear</button>');
// Clear button action
$('.custom-date-control.clear', thisQuestion).click(function(e) {
$('input[type="text"]', thisQuestion).val('');
});
});
</script>
