Date Range with Bootstrap Datepicker

Hi,

I followed step by step this FAQ:https://www.chronoengine.com/faqs/70-cfv5/5201-adding-a-datepicker-for-chronoforms-v5.html and this http://www.chronoengine.com/forums/posts/f5/t97725/how-to-integrate-a-date-range-with-bootstrap-datepicker.html?hilit=data+picker+range

1. I loaded the file Datepicker http://www.eyecon.ro/bootstrap-datepicker/ in the new folder: / components / com_chronoforms5 / ChronoForms / extras;

2. on disegner tab I created field id 'text1' and added extra parameter "dd-mm-yyyy"

3. to include files in J3 I changed $doc with $jdoc, but doesn't appear the calendar.
the calendar icon does not appear even if I add extra piece of code

Thanks in advance!

Hi cornelio,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob,

here is the link http://50.87.153.95/~ierasia/gestionale/index.php?option=com_chronoforms5&chronoform=sia-data-range-test

and http://50.87.153.95/~ierasia/gestionale/index.php?option=com_chronoforms5&chronoform=sia-range-date

thanks for the reply

Cornelio

Hi cornelio,

It looks as though the file isn't being found here

http://50.87.153.95/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js

I think that the URL may be missing the /~ierasia/gestionale/ You may need to use the full URL to fix that.

Bo

[attachment=0]test-calendar.JPG[/attachment]

Hi Bob

so it presents the full-page calendar by changing the file path

from this

$jdoc->addScript('/components...

to this:

<?php
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
$jdoc = JFactory::getDocument();
$jdoc->addScript('components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js');
$jdoc->addStylesheet('components/com_chronoforms5/chronoforms/extras/datepicker/css/datepicker.css');
$script ="
jQuery( document ).ready(function( jQ ) {
  jQ('#text1').datepicker();
jQ('#text1').after(
'<span class=\'add-on\'><i class=\'icon-calendar\'></i></span>');
  jQ('#text1').css({
    'display': 'inline-block',
    'margin-right': '6px'
  });
});
";
$jdoc->addScriptDeclaration($script);
?>

thanks a lot

Cornelio

Hi cornelio,

I still see a JavaScript error on the form page

Failed to load resource: the server responded with a status of 404 (Not Found) http://50.87.153.95/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js

Bob

Hi Bob

I put the absolute path but nothing happens with this script:

<?php
    JHtml::_('jquery.framework');
    JHtml::_('bootstrap.framework');
    $jdoc =& JFactory::getDocument();
    $jdoc->addScript('http://50.87.153.95/~ierasia/gestionale/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js');
    $jdoc->addStylesheet('http://50.87.153.95/~ierasia/gestionale/components/com_chronoforms5/chronoforms/extras/datepicker/css/datepicker.css');
    $script ="
	jQuery( document ).ready(function( jQ ) {
    var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
         
        var checkin = JQ('#dpd1').datepicker({
        onRender: function(date) {
        return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
        }).on('changeDate', function(ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.setValue(newDate);
        }
        checkin.hide();
        JQ('#dpd2')[0].focus();
        }).data('datepicker');
        var checkout = JQ('#dpd2').datepicker({
        onRender: function(date) {
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
        }).on('changeDate', function(ev) {
        checkout.hide();
        }).data('datepicker');
		});
    ";
    $jdoc->addScriptDeclaration($script);
    ?>

Sorry Bob, I would not want to abuse your patience!, but what interests me is to resolve the difference between dates starting from this faq http://www.chronoengine.com/faqs/3161-how-can-i-select-a-range-of-dates-part-2.html but unfortunately I have not solved.

anyway thanks
cornelio

Hi cornelio,

I checked one of your forms and this line is missing the j at the beginning

jQuery( document ).ready(function( jQ ) {

Bob