Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Problematic [Date/Time]-type question while its format is "mm/yyyy"

  • kmanapp
  • kmanapp's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
9 years 7 months ago #117832 by kmanapp
Dear friends,

If I set a Date/Time-type question's Format to "mm/yyyy", it shows the DatePicker properly, however, the button it shows are problematic.

For one thing, clicking the "Now" button will insert a complete timestamp, i.e. Date + Time.
For second thing, which is not with respect to whatever format but merely to the DatePicker component feature, there does not provide a "Clear" somehow for respondent to clear the value if such question is not mandatory (i.e., optional).

Any idea?

Many thanks in advance!
The topic has been locked.
More
9 years 7 months ago #117839 by eloner
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 7 months ago - 9 years 7 months ago #117863 by tpartner
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.

Set up your survey to use JavaScript and place the following script in the source of the question:
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>

Add this to the end of template.css:
Code:
/* Custom date styles */
 
#ui-datepicker-div.no-calendar .ui-datepicker-calendar {
  display:none;
}
 
.custom-date-mmyy .custom-date-control {
  margin-left: 10px;
}



Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 7 months ago by tpartner.
The following user(s) said Thank You: kmanapp
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose