Forums

High,
I need a little help.
I want to synchronize 2 datepicker (build in from CF5)
First "Start Date", second "End Date"

what i want
1) The "End Day" may not be earlier than "Start Date"
2) Show in a new data item the lenght of days

Example:
Input Start : 10.01.2016
Input End : 12.01.2016
Day: 2

how can i do this

Thx for support
Tom

Hi Tom,

You can probably do this with the ChronoForms datepicker but that may not be the simplest solution.

I built a test form using the Date Range Picker scripts that does what you need (see my test here ).

Here's how it is built:

+ In your form Designer tab add a text input and give it the name and id 'daterange'
+ In the Setup tab add a Load CSS action before the HTML (Render form) action and add this in the CSS Files box

http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css

+ Similarly add a Load JS action and add this in the Load JS Files box

http://cdn.jsdelivr.net/momentjs/latest/moment.min.js
http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js

+ Lastly in the JS Code box of the same action add this:

jQuery(document).ready(function (jQ) {
  jQ('#daterange').daterangepicker();
  jQ('#daterange').after('<span id="days"></span>');

  jQ('#daterange').on('apply.daterangepicker', function(ev, picker) {
    var start, end, days;
    start = picker.startDate;
    end = picker.endDate;
    days = end.diff(start, 'days');
    jQ('#days').html(days+' Days');
  });
});;

+ Test the form.

This version just shows the number of days below the datepicker input - you can alter that to show it somewhere else and/or set the value of a form input so that it is submitted.

Check the Date Range Picker docs for many other options.

Note: this loads the moment.js library which also contains a full range of date and time handling options.

Bob

Thanks, I'll check it out.
I've seen another interesting example from you here
http://www.chronoengine.com/faqs/64-cfv4/cfv4-using-the-datepicker/3161-how-can-i-select-a-range-of-dates-part-2.html

However, I don't have the structure.
components/com_chronoforms/js/datepicker_moo/

I suspect mootools are collections of scripts?
how do I use it and embed it into the ChronoForms structure?

thx
tom

ok, it works..but

the input is the first of the formular
it does not fit in my layout
after entering is no correction possible
I can not continue to use end and the beginning date for sending mail confirmation

Hi Tom,

the input is the first of the formular
Yes, you can remove the second one as it is not needed.

it does not fit in my layout
You may need to change the layout or use a different plug-in. I can't tell from the information here

after entering is no correction possible
It is when I test

I can not continue to use end and the beginning date for sending mail confirmation
Yes you can, you either parse the data from this input, or add the start and end dates to hidden inputs.

Bob

to much for me :-(
I'll refrain from

but can you give me some information about that
I've seen another interesting example from you here

http://www.chronoengine.com/faqs/64-cfv4/cfv4-using-the-datepicker/3161-how-can-i-select-a-range-of-dates-part-2.html

However, I don't have the structure.

components/com_chronoforms/js/datepicker_moo/

I suspect mootools are collections of scripts?

how do I use it and embed it into the ChronoForms structure?

Hi Tom,

The other range datepicker FAQ was for ChronoForms v4. Joomla! 1.5 and 2.5 used the MooTools JavaScript library; Joomla! 3 uses the jQuery library, hence the range-picker I chose. It's rather easier to use than the older MooTools one.

Bob