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:
2.)in Setup before Html (render Form) make a custom code like:
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/
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
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/
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/
