How to use Javascript date picker inside snippet?

288 Posts

galahad5 Reply #1, 13 years, 11 months ago

I have a snippet in Revo 2.1.3 that creates a number of input rows for users to add multiple dates and place them in the database, as follows:

<?php
$output = ""; 
    $desired_row_count = 10; 
    for ($i=0; $i<$desired_row_count; $i++) { 
        $output .= ' 
          <tr>  
            <td width="150"><input type="text" name="_DateAvailable['.$i.']" size="20" /><!--  <a href="javascript:showCal('. "'Calendar1'".')">Select Date</a>--></td>  
            <td width="150"><select size="1" name="_DayNight['.$i.']"><option selected>Day</option><option>Night</option></select></td>  
          </tr>'; 
    } 
    echo $output;

Problem is the Javascript call. It doesn't work at all when in the snippet but it has to be inside the snippet so that each row has the date picker. The snippet is called inside a chunk (where the rest of the form is), and the Javascript date picker scripts are loaded in the template for the page.

It works fine in the page HTML but I need to get it to work from inside the snippet- any ideas?

288 Posts

galahad5 Reply #2, 13 years, 11 months ago

By the way- yes, it's meant to be commented out- as it doesn't work at the moment.

I've tried adding in these MODX calls to the relevant external JS files at the top of the snippet but they don't work:

$modx->regClientStartupScript('js/cal_conf2.js');
$modx->regClientStartupScript('js/cal2.js');

[ed. note: galahad5 last edited this post 13 years, 11 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 13 years, 11 months ago

I did this once; it took some fiddling with the datepicker javascript initialization to figure out how I would have to do it.

This was for a form that allowed up to ten items, each consisting of several fields, including a date picker. Javascript was used to show a new, empty one when one was filled in. Each group was like this:

<tr class="fileUpload" id="fileUpload1">
<th>Attachment 1:</th>
<td><label for="file1"><input type="file" class="file" name="file1" id="file1" eform="Attachment 1:file:0:Only the following file formats are supported - pdf, txt, doc, docx, xml, ppt, IDML, INX:#LIST doc,docx,html,inx,pdf,ppt,xls,xml,vdx,vsx,vtx,zip"></label></td>
<th>Target Language:</th>
<td><input type="checkbox" name="tarlang1[]" value="DE" eform="Target Language::0">DE<input type="checkbox" name="tarlang1[]" value="FR">FR<input type="checkbox" name="tarlang1[]" value="IT">IT<input type="checkbox" name="tarlang1[]" value="EN">EN</td>
<th>Deadline:</th>
<td><input type="text" class="datepicker" id="datepicker1" name="deadline1" value="" eform="Deadline::0"></td>
</tr>

Then the javascript looks like this (using the JQuery UI datepicker)

$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
    $("#datepicker4").datepicker();
    $("#datepicker5").datepicker();
    $("#datepicker6").datepicker();
    $("#datepicker7").datepicker();
    $("#datepicker8").datepicker();
    $("#datepicker9").datepicker();
    $("#datepicker10").datepicker();
});

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

288 Posts

galahad5 Reply #4, 13 years, 11 months ago

Thanks, unfortunately I've no idea how I'd implement that as the Javascript is inside the snippet, as the date picker has to be outputted 10 times along with the date input- and it looks as if when it's inside the snippet it just won't work at all...

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 13 years, 11 months ago

The javascript I posted is from inside of a snippet. After defining the javascript,

$js = '<script>
$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
    $("#datepicker4").datepicker();
    $("#datepicker5").datepicker();
    $("#datepicker6").datepicker();
    $("#datepicker7").datepicker();
    $("#datepicker8").datepicker();
    $("#datepicker9").datepicker();
    $("#datepicker10").datepicker();
});
</script>';
$modx->regClientScript($js);

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

288 Posts

galahad5 Reply #6, 13 years, 11 months ago

Ok, so I would put the script inside the snippet? Or would it go in the page template? How would this work though with the date picker that I'm trying to use inside my snippet? Also I wouldn't be able to use id="datepicker1", id="datepicker2" etc. for the inputs as they're only outputted once in the snippet as part of the loop?

Is there a way around this?