Welcome to the LimeSurvey Community Forum

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

Datepicker customization

  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 6 months ago #124289 by pvdemael
Datepicker customization was created by pvdemael
Hi,

I would like to customize the jQuery datepicker on some of the many date questions in my survey.

Looking into the core code, I saw that the options of the picker are set in de setPickerOptions function in date.js (line 40).
This function is called before the picker pops us, so I suspect that all changes in the $(document).ready() are overriden again.

Does anyone have an idea to circumvent this problem?

LS version 2.06+ Build 150825

Thx
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #124322 by tpartner
Replied by tpartner on topic Datepicker customization
If you're comfortable with changing options, I would suggest simply inserting your own date picker in a short-text question. Search the forums for ".datepicker".

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: pvdemael
The topic has been locked.
  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 6 months ago - 8 years 6 months ago #124429 by pvdemael
Replied by pvdemael on topic Datepicker customization
I've experimented and can make it work.
I now want to use the date of a datepicker to limit the minDate of a second one.
How can this be achieved?
I have a short text question defined as datepicker date1. I tried something like this in the javascript code of date2:
Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Make dates
    var mindate = new Date();
    var maxdate = new Date();
 
               var str= {date1};
 
    // Insert the datepicker
    $('input[type="text"]', thisQuestion).datepicker({
      dateFormat: "dd/mm/yy",
      minDate: new Date(Date.parse(str.substring(0,9))),
      maxDate: new Date();
    });  
 
    // 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)
      });
    });  
  });  
</script>


This does not work at all, it fails at line var str= {date1};

I also tried to implement the suggestion at manual.limesurvey.org/Workarounds:_Manip..._other_Datequestions
but at no success.

Any help will be appreciated
Last edit: 8 years 6 months ago by pvdemael. Reason: Added [code] tags
The topic has been locked.
  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 6 months ago #124466 by pvdemael
Replied by pvdemael on topic Datepicker customization
After looking around, I was able to solve my problem partly.
I have some javascript with custom jQuery datepickers at the question group level to use the first date as maxDate of the second one.
If the first date is altered, the second date is cleared to meet the constrictions.

But one thing I was not able to figure out is that I cannot see the value of the custom datepicker.
Attached is a question group with:
  • 2 custom datepickers date1 and date2
  • a boilerplate question bpDate1 with question text the value of date1
  • 1 datepicker date 3 with the built datepicker
  • a boilerplate question bpDate3 with question text the value of date3
bpDate3 is changed after choosing a date in date3, but bpDate1 is always empty.

Do I miss something (setting the value of the short text question or so?)
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #124508 by tpartner
Replied by tpartner on topic Datepicker customization
Nothing attached.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • pvdemael
  • pvdemael's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 6 months ago #124520 by pvdemael
Replied by pvdemael on topic Datepicker customization
Sorry, here it is
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #124568 by tpartner
Replied by tpartner on topic Datepicker customization
You need to fire the checkconditions() function to update Expression Manager variables.

So, using the Datepicker "onSelect" option something like this:

Code:
// Insert the datepicker
$('input[type="text"]', q1).datepicker({
  showButtonPanel: true,
  dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    minDate: "-40y",
    onSelect  : function(e) {
      var el = $(this);
      checkconditions($(el).attr('value'), $(el).attr('name'), $(el).attr('type'));
    },
    maxDate: new Date()
});

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose