- Posts: 31
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Datepicker customization
- pvdemael
- Topic Author
- Offline
- Junior Member
Less
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
8 years 6 months ago #124322
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 31
- Thank you received: 0
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:
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
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 31
- Thank you received: 0
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:
Do I miss something (setting the value of the short text question or so?)
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
Do I miss something (setting the value of the short text question or so?)
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
8 years 6 months ago #124508
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 31
- Thank you received: 0
8 years 6 months ago #124520
by pvdemael
Replied by pvdemael on topic Datepicker customization
Sorry, here it is
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
8 years 6 months ago #124568
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
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.