Back to limesurvey.org

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 10 months 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 10 months 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.
Attachments:
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 10 months 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
4 years 5 days 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
4 years 4 days 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
4 years 3 days 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
4 years 3 days 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
4 years 1 day 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
3 years 9 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
3 years 9 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
3 years 9 months ago - 3 years 9 months ago #215130 by Joffm
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


 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 9 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
3 years 9 months ago - 3 years 9 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!
Attachments:
Last edit: 3 years 9 months ago by mihai.bejan. Reason: Bad text arrangement
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source