Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Date Range with Bootstrap Datepicker

co
cornelio 05 Jul, 2015
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!
Gr
GreyHead 05 Jul, 2015
Hi cornelio,

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

Bob
co
Gr
GreyHead 05 Jul, 2015
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
co
cornelio 06 Jul, 2015
[attachment=0]test-calendar.JPG[/attachment]
co
cornelio 06 Jul, 2015
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
Gr
GreyHead 06 Jul, 2015
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
co
cornelio 06 Jul, 2015
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
Gr
GreyHead 07 Jul, 2015
Hi cornelio,

I checked one of your forms and this line is missing the j at the beginning
jQuery( document ).ready(function( jQ ) {

Bob
co
cornelio 13 Jul, 2015
Answer
Hi Bob,
here is how I've solved: 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="http://50.87.153.95/~ierasia/gestionale/components/com_chronoforms5/chronoforms/extras/datepicker/js/jquery.ui.datepicker-it.js"></script>

<script>
$(document).ready(function(){
    
    var $ad_data1 =  $("#ad_data1").datepicker({ dateFormat: "dd-mm-yy" }).val()
	var $ad_data_ese2 =  $( "#ad_data_ese2" );
    var $ad_data_sca2 =  $( "#ad_data_sca2" );
	
	
    $ad_data_ese2.datepicker({
      altField: '#ad_data_ese',
      altFormat: 'yy-mm-dd' 
    });
    $ad_data_sca2.datepicker({
       altField: '#ad_data_sca',
      altFormat: 'yy-mm-dd',
         onClose: function() {
            var fromDate = $ad_data_ese2.datepicker('getDate');
            var toDate = $ad_data_sca2.datepicker('getDate');
            // date difference in millisec
            var diff = new Date(toDate - fromDate);
            // date difference in days
            var days = diff/1000/60/60/24;
              $('#ad_validita').val(days);
      
          }
       
 
    });
});
</script>

<div class="">
    <p>start date: <input type="text" id="ad_data_ese2" class="S form-control">start date for mysql:<input type="text" id="ad_data_ese" name="ad_data_ese"  value="" readonly="readonly"/></p>
	
    <p>end date: <input type="text" id="ad_data_sca2"class="S form-control">end date for mysql:<input type="text" id="ad_data_sca" name="ad_data_sca"  value="" readonly="readonly"/></p>
	
	<p>Differenza Giorni:<input name="ad_validita" id="ad_validita" value="" type="text" class="SS form-control" readonly="readonly"/></p>
	</div>



furthermore the script calculate the days between a start-date and an end-date of the italian datapicker in order to format and convert it for mysql

Best Regards
Cornelio
This topic is locked and no more replies can be posted.