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
  • slarson55's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 2 days 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?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 2 days ago #195837 by tpartner
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:

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:

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.
The following user(s) said Thank You: slarson55
The topic has been locked.
  • slarson55
  • slarson55's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 2 days 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.
The topic has been locked.
More
3 years 1 month 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?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 1 month ago #211351 by tpartner
Replied by tpartner on topic Array of Dates in Limesurvey 3.x
Something like this for the first column:

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.
More
3 years 1 month 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...
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 1 month ago #211472 by tpartner
Replied by tpartner on topic Array of Dates in Limesurvey 3.x

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:

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>

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:

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:

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.
The following user(s) said Thank You: cdorin, ruytterm
The topic has been locked.
More
3 years 1 month ago #211582 by ruytterm
Replied by ruytterm on topic Array of Dates in Limesurvey 3.x
You're awesome!
Works like a charm!
The topic has been locked.
More
2 years 11 months 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!
The topic has been locked.
More
2 years 11 months 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!
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 11 months ago - 2 years 11 months ago #215130 by Joffm
Replied by Joffm on topic Array of Dates in Limesurvey 3.x

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 years 11 months ago by DenisChenu. Reason: usage of www.example.com
The following user(s) said Thank You: DenisChenu, mihai.bejan
The topic has been locked.
More
2 years 11 months ago - 2 years 11 months 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!
Last edit: 2 years 11 months ago by mihai.bejan. Reason: Bad text arrangement
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose