The second date picker?s starting date is the value of the first date picker + 1

[mostlyseven]

Hi All,

I have 2 datepickers in a form.

anfrage___ankunft "start date"

anfrage___abreise "end date"

they are both in the same group.

I want when the start date is selected that on select of the end date this will have the value of the start date +1

Any ideas how to do this?

javacript code field on select: ??????

 

[rob]

whilst not 100% what you need the wiki page has a good example of how to deal with date elements via javascript:
http://www.fabrikar.com/forums/index.php?wiki/form-javascript/

 

[mostlyseven]

Rob or anybody? Do you have a ready made solution for my problem? Or can you do this as a commercial job? Or as part of the professional support?

Thank you very much for your kind help.

Mostlyseven

​

Hi All,​

​

I have 2 datepickers in a form.​

​

anfrage___ankunft "start date"​

​

anfrage___abreise "end date"​

​

they are both in the same group.​

​

I want when the start date is selected that on select of the end date this will have the value of the start date +1 as a starting point.​

This you find for example in Hotel request forms....​

​

Any ideas how to do this?​

​

javacript code field on select: ??????​

​

 

[rob]

hi Sorry I had presumed that as you'd not replied the initial wiki page was enough info.
I've added ad specific example for exactly what you are asking as well:
Fabrik 3 form javascript - Fabrik

Cheers
Rob

 

[mostlyseven]

thank you Rob, I will try it ASAP.

 

[mostlyseven]

hi Sorry I had presumed that as you'd not replied the initial wiki page was enough info.
I've added ad specific example for exactly what you are asking as well:
Fabrik 3 form javascript - Fabrik

Cheers
Rob

Hi Rob, it doesn't seem to work.
I put your code in the first date under javascript / on change.
Form is 1

// Alter formRef and endDate to match your form's id and the end date element's full name:
var formRef = 'form_1';
var endDate = 'anfrage___abreise';
 
var end = Fabrik.blocks[formRef].formElements.get(endDate);

But when I select a date in the first calender, the second calender still shows the date of today...
Ajax validation is on.

 

[rob]

can you post the form's url please?

 

[mostlyseven]

I have the site local, but will upload it now.

 

[mostlyseven]

Hi Rob, the link for the form is: Freibleibende Anfrage | Urlaub am Faaker See
It's in German Anreise - N?chte - Abreise
In Anreise element I put the code. Abreise should be changed the moment somebody picks a date in Anreise.

Thank you for your help.

 

[rob]

think your form id is 7 not 1 - and I don't see any code added to the page - could you double check that you've added it to the right element?

 

[mostlyseven]

Hi Rob, Sorry but I took the code out because it was a Live site and it made a mistake in the form.
I think it has something to do with the ajax validation. It loaded the ajax validation. but what happened was that people couldn't change the second date at all. it was stuck in the month.

I have an other website http://www.millstaettersee.net/urlaubs-anfrage, where I am still testing.
Here is the group where the two datepickers are in:


The Form ID is 1 and I do have ajax validation on but that doesn't seems to load the ajax validation.....
The code I put in ankunft here:



But the moment the ankunft date is chosen, it won't show it on the abreise date.....

Thank you for helping. It is much apreciated.
I have joomla 2.5.9 and github 4a3a3a4.
I can give you access dates to the site.

 

[rob]

there's a js error in your custom form_1.js file:

date1.addNewEvent('change', function (e) {

date1 is not defined as your form doesn't appear to have the element 'anfrage___date1'

That initial js error will stop subsequent js from working

 

[cheesegrits]

OK, I've made some progress, here's the current JS:

Fabrik.addEvent('fabrik.form.elements.added', function () {
    // All the elements have been loaded in Fabrik 
    var form = Fabrik.blocks.form_1; // Replace 1 with your form id
 
    var elements = form.formElements;
    var date1 = elements.get('anfrage___ankunft');
    var date2 = elements.get('anfrage___abreise');
 
    var output = elements.get('anfrage___naechte');
 
    // A function to work out the date difference
    var getDiff = function (days) {
 
if (typeof(days) === 'undefined') {
days = 1;
}
 
if (date1.get('value') == '' || date2.get('value') == '') {
return 0;
}
 
        // Create two JS date objects
        var d1 = new Date.parse(date1.get('value'));
        var d2 = new Date.parse(date2.get('value'));
 
        // diff in miliseconds
        var diff = d2 - d1; 
        var dayDiff = diff / (days * 24 * 60 * 60 * 10 * 10 * 10);
 
return dayDiff;
    }
 
var doDiff = function () {
var dayDiff = getDiff();
// Update the output element with the number of days
        output.update(dayDiff);
}
 
var doChangeStart = function () {
var dayDiff = getDiff();
if (dayDiff < 1) {
var d1 = new Date.parse(date1.get('value'));
d1.setDate(d1.getDate() + 1);
date2.update(d1);
}
doDiff();
}
 
var doChangeEnd = function () {
var dayDiff = getDiff();
if (dayDiff < 1) {
alert ("End Date must be greater than Start Date!");
var d1 = new Date.parse(date1.get('value'));
d1.setDate(d1.getDate() + 1);
date2.update(d1);
}
doDiff();
}
 
var doChangeNights = function () {
if (date1.get('value') != '') {
var days = output.get('value').toInt();
var d1 = new Date.parse(date1.get('value'));
d1.setDate(d1.getDate() + days);
date2.update(d1);
}
}
 
    // Add events to the two dates to work out the date difference
    date1.addNewEvent('change', function (e) {
doChangeStart();
    });
 
    date2.addNewEvent('change', function (e) {
doChangeEnd();
    });
 
output.addNewEvent('blur', function (e) {
doChangeNights();
});
 
})

... which is more or less doing what Sabine is asking for. If you change the start date, it sets the end date to start date +1 day. If you change the end date, it makes sure it's at least 1 days greater than start date. If you change the "nachte" field, it adds that many days to start date, and sets end date to that.

Problem is, I've gotten into an issue where changing the end date from the nights handling, is then re-firing the changeEndDate() function, because the Fabrik element itself fires change events.

rob - how do I stop that happening?

-- hugh

 

[mostlyseven]

friendly bump to Rob.

 

[rob]

Problem is, I've gotten into an issue where changing the end date from the nights handling, is then re-firing the changeEndDate() function, because the Fabrik element itself fires change events.

at a guess the simplest thing would be to set a global js boolean variable in the first method which is then checked for in the second method and if its set then dont run the rest of the code.