Forums

Maybe not perfect but i want to share my solution / i use a bootstrap3 template so fa-icons get loaded there
style for chronoforms none:
get the files:http://eternicode.github.io/bootstrap-datepicker/copy to libraries/cegcore/assets/dp_bs3/
1.) implementing html with 2 custom fields in designer:

<div class=" Checkin ">
<label for="Checkin" class="gcore-label-top">##Checkin##</label>   change in locales ##Checkin##=... 
<div class="input-group date Checkin">
<input name="Checkin" id="Checkin" class=" form-control"  type="text" /> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div></div>

<div class=" Checkout ">
<label for="Checkout" class="gcore-label-top">##Checkout##</label>   ...change in locales ##Checkout##=... 
<div class="input-group date Checkout">
<input name="Checkout" id="Checkout" class=" form-control"  type="text" /> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div></div>

2.)in Setup before Html (render Form) make a custom code like:

<?php
$lang =& JFactory::getLanguage();
$tag =& $lang->getTag();
$scripturl = "libraries/cegcore/assets/dp_bs3/js/locales/bootstrap-datepicker.$tag.min.js";
$scripturl2= JURI::root().'libraries/cegcore/assets/dp_bs3/';
$scripturl3 = "libraries/cegcore/assets/dp_bs3/js/dp.$tag.js";
$jdoc =& JFactory::getDocument();
$jdoc->addStyleSheet($scripturl2.'css/bootstrap-datepicker3.min.css');
$jdoc->addScript($scripturl2.'js/bootstrap-datepicker.min.js');
$jdoc->addScript(JURI::root().$scripturl);
$jdoc->addScript(JURI::root().$scripturl3);
?>

i have copied the files to libraries/cegcore/assets/dp_bs3. the dp.$tag.js is for language dependent loading. of custom js files i created like this: for example en-GB:/libraries/cegcore/assets/dp_bs3/js/dp.en-GB.js for other language you copy the script rename it to dp.xx-XX.js and change the language in the script. for further config look here:
http://eternicode.github.io/bootstrap-datepicker/

jQuery(document).ready(function ($) {
$(function () {
    var checkout = $('.Checkout').datepicker({weekStart: 1, todayHighlight: false, language:'en-GB', autoclose: true, format: 'dd-mm-yyyy'});
    $('.Checkout').attr('disabled', 'disabled');
    var checkin = $('.Checkin').datepicker({weekStart: 1, todayHighlight: true,
		language:'fr-FR',
        autoclose: true,
        format: 'dd-mm-yyyy',
        startDate: "+0d",
		endDate: ''
    }).on('changeDate', function(event) {
        $('.Checkout').removeAttr('disabled');
        var newDate = new Date(event.date)
        newDate.setDate(newDate.getDate() + 1)
        checkout.datepicker("setStartDate", newDate);
		checkout.datepicker("update", newDate)
		  checkin.datepicker('hide');
       
        $('.Checkout')[0].focus();
    });
});
});

that way checkout is alway 1 day after checkin automatically selected...js is not perfect (focus doesnt work) ..

in email template you have to call this fields custom with custom email like they arent automatically there

##Checkin##: {Checkin} <br> 
##Checkout##: {Checkout}

I spent alot of time with the datepicker recherching i liked the config of eternicode and i needed two dates in the end
...i also recommend everyone looking into this one:
http://www.daterangepicker.com/