Array of Dates in Limesurvey 3.x

More
1 year 2 months ago #195835 by slarson55
Hello All,

I am working on a survey to replace an excel sheet that has about 30 start and end dates that need to be entered. The existing solution I have is to just have two columns of texts. I need date pickers direly!

I looked through several different solutions to call a datepicker function, using google to look through your forums, and did find some great explanations of implementing pickers in some situations that I might have been able to jerry rig but 2.0 and 2.5 code does not work at all in 3.x LS. Does anybody know of an easy way to get a date picker to appear for array of texts?

Please Log in to join the conversation.

More
1 year 2 months ago #195837 by tpartner
This script will insert date-time pickers into a text-array in LS3:

<script type="text/javascript" charset="utf-8">
	$(document).on('ready pjax:scriptcomplete',function(){
		var rootPath = location.pathname.split('index.php')[0];
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />');
 
		$.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js')
			.done(function(script, textStatus) {
 
				// Insert the date-time-pickers
				$('.answer-item input:text', thisQuestion).each(function(i) {
 
					var thisID = $(this).attr('id');
 
					$(this).addClass('date-control date datetimepicker')
						.wrap('<div id="datetimepicker_'+thisID+'" class="input-group date date-timepicker-group" />')
						.after('<div class="input-group-addon datetimepicker-addon btn btn-primary">\
									<i class="fa fa-calendar" aria-hidden="true"></i><span class="sr-only"></span>\
								</div>');
 
					$('#datetimepicker_'+thisID+'').datetimepicker({
						useCurrent:false,
						allowInputToggle: true,
						format: 'DD:MM:YYYY'
					});
				});
			})
			.fail(function( jqxhr, settings, exception ) {
				console.log(exception);
		});
    });
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...25-2.lss
File Size:19 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: slarson55

Please Log in to join the conversation.

More
1 year 2 months ago #195839 by slarson55
Thank you Tony!

I implemented it and was even able to use the 'LT' code next to format to get it to be a time picker only. It looks really good.

Please Log in to join the conversation.

More
4 months 2 weeks ago #211318 by ruytterm
Hi guys!
Thanks for the example code!

I'm trying to modify it to insert the datepicker only in one column, so I'll have one text column and one date column, but I'm too noob to do it.

Can someone help?

Please Log in to join the conversation.

More
4 months 2 weeks ago #211351 by tpartner
Something like this for the first column:

<script type="text/javascript" charset="utf-8">
	$(document).on('ready pjax:scriptcomplete',function(){
		var rootPath = location.pathname.split('index.php')[0];
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />');
 
		$.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js')
			.done(function(script, textStatus) {
 
				// Insert the date-time-pickers
				$('.answer-item:nth-child(2) input:text', thisQuestion).each(function(i) {
 
					var thisID = $(this).attr('id');
 
					$(this).addClass('date-control date datetimepicker')
						.wrap('<div id="datetimepicker_'+thisID+'" class="input-group date date-timepicker-group" />')
						.after('<div class="input-group-addon datetimepicker-addon btn btn-primary">\
									<i class="fa fa-calendar" aria-hidden="true"></i><span class="sr-only"></span>\
								</div>');
 
					$('#datetimepicker_'+thisID+'').datetimepicker({
						useCurrent:false,
						allowInputToggle: true,
						format: 'DD:MM:YYYY'
					});
				});
			})
			.fail(function( jqxhr, settings, exception ) {
				console.log(exception);
		});
    });
</script>

Modify the index number in this line as necessary for other columns:

$('.answer-item:nth-child(2) input:text', thisQuestion).each(function(i) {

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: cdorin, ruytterm

Please Log in to join the conversation.

More
4 months 2 weeks ago #211417 by ruytterm
Thank you so much! You've saved me!

I just noticed that the datepicker doesn't load properly on mobile, is that right?
I also went to getdatepicker.com/4/ and manage to change de language of the datepicker, but I'm struggling to remove the icon, so far no luck...

Please Log in to join the conversation.

More
4 months 2 weeks ago #211472 by tpartner

I just noticed that the datepicker doesn't load properly on mobile, is that right?

You may need to add some style rules to defeat the block display of tables on smaller screens:

<style type="text/css">
 
	#question{QID} .bootstrap-datetimepicker-widget table {
		display: table;
	}
 
	#question{QID} .bootstrap-datetimepicker-widget table thead {
		display: table-header-group;
	}
 
	#question{QID} .bootstrap-datetimepicker-widget table tbody {
		display: table-row-group;
	}
 
	#question{QID} .bootstrap-datetimepicker-widget table tr {
		display: table-row;
	}
 
	#question{QID} .bootstrap-datetimepicker-widget table th,
	#question{QID} .bootstrap-datetimepicker-widget table td {
		display: table-cell;
		text-align: center !important;
	}
</style>

I also went to getdatepicker.com/4/ and manage to change de language of the datepicker, but I'm struggling to remove the icon, so far no luck...

You need to modify the html structure:

<script type="text/javascript" charset="utf-8">
	$(document).on('ready pjax:scriptcomplete',function(){
		var rootPath = location.pathname.split('index.php')[0];
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />');
 
		$.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js')
			.done(function(script, textStatus) {
 
				// Insert the date-time-pickers
				$('.answer-item:nth-child(2) input:text', thisQuestion).each(function(i) {
 
					var thisID = $(this).attr('id');
 
					$(this).addClass('date-control date datetimepicker')
						.wrap('<div class="inserted-date-wrapper" style="position:relative" />');
 
					$(this).datetimepicker({
						//debug: true,
						widgetParent: $(this).parent(),
						useCurrent:false,
						allowInputToggle: true,
						format: 'DD:MM:YYYY'
					});
				});
			})
			.fail(function( jqxhr, settings, exception ) {
				console.log(exception);
		});
    });
</script>

Sample survey attached attached:

File Attachment:

File Name: limesurvey...9381.lss
File Size:26 KB

 

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: cdorin, ruytterm

Please Log in to join the conversation.

More
4 months 2 weeks ago #211582 by ruytterm
You're awesome!
Works like a charm!

Please Log in to join the conversation.

More
1 month 4 weeks ago #215117 by mihai.bejan
Hi Tony,

Thank you for your code! It work great!

I'm not good at coding and I really need some help. I'm using this code to have multiple date range picker but for what I'm using it I also need some small features.

Please, if you have time or you want, it is possible to have a minimum and a maximum date? When I say minimum date, I'm thinking to not be able to select the days before "Today". Also the end date if it's possible to be conditioned to be higher than start date, that would be great.

If you can help I would really appreciate and my thanks wouldn't be enough.

Best reagrds!

Please Log in to join the conversation.

More
1 month 4 weeks ago #215120 by mihai.bejan
Or if there is any documentation for this bootstrap, because I can't find any that works.

Thank you!

Please Log in to join the conversation.

More
1 month 4 weeks ago - 1 month 4 weeks ago #215130 by Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 month 4 weeks ago by DenisChenu. Reason: usage of www.example.com
The following user(s) said Thank You: DenisChenu, mihai.bejan

Please Log in to join the conversation.

More
1 month 4 weeks ago - 1 month 4 weeks ago #215145 by mihai.bejan
Hi guys,

I need some help, if it's possible on the attached survey. The focus should be only on the code of the  first question.
Using the code that tpartner uploaded, I modified the array in order to have two entities, one for start date and one for end date.
What I would really like is that the selected start date to be the minDate of the end date. I really tried different solution from web, but it looks like I didn't succeeded yet.
If you can have a look on the code of the first question and have any solution I would really appreciate.

Thank you guys in advance!
Attachments:
Last edit: 1 month 4 weeks ago by mihai.bejan. Reason: Bad text arrangement

Please Log in to join the conversation.

More
1 month 4 weeks ago #215158 by Joffm
Hi,
why don't you use the built-in questioin type "date/time"?
Here all your requirements are built-in

For the first start date (Q1a) set a Mindate of "date(Y-m-d)"
For the first end date (Q1b) set Mindate to the value of Q1a

2. Period:
start date: Mindate=Q1b
end date: Mindate=Q2a
...

   

To join the questions a used the css class "no-bottom".
Put this into your "custom.css" and add the css class "no-bottom" to the first of the two questions
.no-bottom{border-bottom:0;margin-bottom:0;}
.no-bottom .answer-container {padding-bottom: 0em;}

Just an idea.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
1 month 4 weeks ago #215159 by Joffm
And as you read here
manual.limesurvey.org/Question_type_-_Da..._date_.28date_min.29

you can use certain strings or calculation to fine tune the allowed date rangeValid values
  • Any date value in format YYYY-MM-DD (eg., 2017-08-24);
  • Any year value;
  • Any English string  : "now", "-10 years", "tomorrow";
  • Reference to another date/time question : AnotherDateQuestion (using the question code);
  • Expressions : With expressions, a minimum date can be dynamically calculated. For example, you can use a date from a previous answer + 3 days as a minimum for the present question by entering: date("Y-m-d",strtotime(departuredate)+3*60*60*24).
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
1 month 3 weeks ago #215484 by mihai.bejan
Hi Joffm,

Thank very much for your time!
In the end I quit using a date range picker and I decided to go with an Array question. For the statistic it's better this way.

Everything is going pretty smooth, but still I have a problem with Question validation equation. As you can see in the attached survey I want to use 4 tokens, so that each participant will have it's own values.

But let's just focus on first 2 tokens. The first token is a minimum value and the second token is the maximum value that will be mandatory for each participant. The idea is that the sum of responses on the first column to be bigger or equal with min value and smaller or equal with the max value.

For example if the min value will be 2 and the max value will be 32 and if I select only 4 answers on the first column, the question will be in "red" because for some reasons it will compare only with the first digit from the max value; 4 <= 3. The only time the question will be in "green" is when he sum is equal with 2, 3 and from 20 to 32.

If I use for example min value 4 and max value 21 it will be even worse.

If in the Question validation equation I use numbers instead of tokens, it will work fine.

Please, if you encounter this situation in the past can you show the right way. It's not excluded that I use the wrong equation.

Thank you in advance!

Bets regards!
Attachments:

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now