How to integrate a Date Range with Bootstrap Datepicker

Hi,
I would know how to integrate Date Range in ChronoForms v5.
I have followed this guide: http://www.chronoengine.com/faqs/70-cfv5/5201-adding-a-datepicker-for-chronoforms-v5.html
but I would have this: http://www.eyecon.ro/bootstrap-datepicker/#dpd1

I tried with this code but it does not work:

<?php
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
$doc =& JFactory::getDocument();
$doc->addScript('/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js');
$doc->addStylesheet('/components/com_chronoforms5/chronoforms/extras/datepicker/css/datepicker.css');
$script ="
var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
     
    var checkin = $('#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();
    $('#dpd2')[0].focus();
    }).data('datepicker');
    var checkout = $('#dpd2').datepicker({
    onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
    }
    }).on('changeDate', function(ev) {
    checkout.hide();
    }).data('datepicker');
";
$doc->addScriptDeclaration($script);
?>

Thanks in advance!

Hi Capatonda,

What exactly doesn't work?

Do you see JavaScript errors on the page if you check the JavaScript console in your browser web developer tools?

Bob

Hi GreyHead, thank you for your quick reply!
Doesn't appear the calendar.

Firebug give me this error:

TypeError: $(...) is null
onRender: function(date) {

(In the tab designer I have set 2 text box with ids dpd1 and dpd2)

chrome give this error:

Uncaught TypeError: Cannot read property 'datepicker' of null
(anonymous function)

Thank you! It works! 😀