- Posts: 13
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Array of Dates in Limesurvey 3.x
- slarson55
- Topic Author
- Offline
- New Member
Less
More
4 years 4 weeks ago #195835
by slarson55
Array of Dates in Limesurvey 3.x was created 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?
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?
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10104
- Thank you received: 3593
4 years 4 weeks ago #195837
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 Array of Dates in Limesurvey 3.x
This script will insert date-time pickers into a text-array in LS3:
Sample survey attached:
Code:
<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:
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
The topic has been locked.
- slarson55
- Topic Author
- Offline
- New Member
Less
More
- Posts: 13
- Thank you received: 0
4 years 4 weeks ago #195839
by slarson55
Replied by slarson55 on topic Array of Dates in Limesurvey 3.x
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.
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.
The topic has been locked.
- ruytterm
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
3 years 2 months ago #211318
by ruytterm
Replied by ruytterm on topic Array of Dates in Limesurvey 3.x
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?
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?
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10104
- Thank you received: 3593
3 years 2 months ago #211351
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 Array of Dates in Limesurvey 3.x
Something like this for the first column:
Modify the index number in this line as necessary for other columns:
Code:
<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:
Code:
$('.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
The topic has been locked.
- ruytterm
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
3 years 2 months ago #211417
by ruytterm
Replied by ruytterm on topic Array of Dates in Limesurvey 3.x
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...
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...
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10104
- Thank you received: 3593
3 years 2 months ago #211472
by tpartner
Sample survey attached attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Array of Dates in Limesurvey 3.x
You may need to add some style rules to defeat the block display of tables on smaller screens:I just noticed that the datepicker doesn't load properly on mobile, is that right?
Code:
<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>
You need to modify the html structure: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...
Code:
<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:
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
The topic has been locked.
- ruytterm
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
3 years 2 months ago #211582
by ruytterm
Replied by ruytterm on topic Array of Dates in Limesurvey 3.x
You're awesome!
Works like a charm!
Works like a charm!
The topic has been locked.
- mihai.bejan
- Offline
- New Member
Less
More
- Posts: 6
- Thank you received: 0
3 years 4 days ago #215117
by mihai.bejan
Replied by mihai.bejan on topic Array of Dates in Limesurvey 3.x
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!
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!
The topic has been locked.
- mihai.bejan
- Offline
- New Member
Less
More
- Posts: 6
- Thank you received: 0
3 years 4 days ago #215120
by mihai.bejan
Replied by mihai.bejan on topic Array of Dates in Limesurvey 3.x
Or if there is any documentation for this bootstrap, because I can't find any that works.
Thank you!
Thank you!
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12908
- Thank you received: 3975
3 years 4 days ago - 3 years 4 days ago #215130
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Array of Dates in Limesurvey 3.x
Here the docs.
[url] bootstrap-datepicker.readthedocs.io/en/latest/ [/url]
and there is a doc file included
www.example.com/lime3/assets/packages/bo.../datetimepicker/docs
[url] bootstrap-datepicker.readthedocs.io/en/latest/ [/url]
and there is a doc file included
www.example.com/lime3/assets/packages/bo.../datetimepicker/docs
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 days ago by DenisChenu. Reason: usage of www.example.com
The following user(s) said Thank You: DenisChenu, mihai.bejan
The topic has been locked.
- mihai.bejan
- Offline
- New Member
Less
More
- Posts: 6
- Thank you received: 0
3 years 3 days ago - 3 years 3 days ago #215145
by mihai.bejan
Replied by mihai.bejan on topic Array of Dates in Limesurvey 3.x
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!
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: 3 years 3 days ago by mihai.bejan. Reason: Bad text arrangement
The topic has been locked.