- Posts: 37
- Thank you received: 4
Ask the community, share ideas, and connect with other LimeSurvey users!
<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>
/* Custom date styles */ #ui-datepicker-div.no-calendar .ui-datepicker-calendar { display:none; } .custom-date-mmyy .custom-date-control { margin-left: 10px; }