Forums

Hi,

I'm setting up an equiry page for a rental car conpany and the minimum day hire period is 5 days. I have two date pickers...a 'from date' and a 'to date'. Whatever date a person selects I woud like the 'to date' date picker to automatically add 5 days.

Does anyone know how I could do this? Any help will be much appreciated.

Thanks

Hi Brad,

Please check this:
https://www.chronoengine.com/faqs/70-cfv5/5216-date-control-using-cfv5-date-picker-element.html

However, this feature is not available in the latest public installer, so you will need to send me a message using the contact us page to get the latest files!

Regards,
Max

Hi Max,

I have emailed you through your contact us page for the installer that has this feature I need, but I haven't heard back from you. I'll try again and hopefully hear from you soon.

Thanks

Hi Brad,

Files sent!

Regards,
Max

Thank you very much Max! Much appreciated!

I have installed it and trying to set it up. I have added data-on_date_selected=date_change into the extra params field of the 'Pickup date'. What would I add in the extra params section of the 'Drop off date' field?

Website: http://www.campermobilia.com

Thanks for your help

To add... I need the 'dropoff date' to be +5 days from what ever date they select in the 'Pickup date'. They can select a later date, but 5 day hire is the minimum.

Hi Brad,

You will need to add the "date_change" function to a "Load JavaScript" action in the "on load" event, here is an example code:

var chronoJQ = jQuery;
function date_change(elem){
	var start_date = new Date();
	var format = elem.data("gdatetimepicker-format") ? elem.data("gdatetimepicker-format") : GDatetimepicker.format;
	var parsed_start_date = start_date.parse_date(elem.val(), format);
	start_date.setUTCFullYear(parsed_start_date.Y, parsed_start_date.m - 1, parsed_start_date.d);
	var new_start_date = new Date(start_date.getTime() + (5 * 24 * 60 * 60 * 1000));
	chronoJQ("#date2").data("start_date", new_start_date.format_date(format));
	chronoJQ("#date2").val(new_start_date.format_date(format));
}

In this code I have set the 2nd field (id = date2) start date to 5 days after the date selected in the field attached to the function!

Regards,
Max

It works great! Thanks!

Now is there any way on lock in that date at 5+days so that the user can't enter a date less than 5 days after pickup?

Which one ? the first date or the 2nd one ?

Lock in 5 days from the first date. If you see what I have done - http://www.campermobilia.com. But I still need them to select more than 5 days if the want, but nothing less

Hi Brad,

The line below already does this:

chronoJQ("#date2").data("start_date", new_start_date.format_date(format));

But it looks like you haven't updated the field id in your page.

Regards,
Max

I don't how I missed that! Thank you so much! That got it working...

Hi Max,
thanks for code posted here. It's very usefull and I applied at website that I'm developing with a little changes: http://www.wscturismo.com/. The form title is "Planeje sua viagem" (Plan your travel).

In this case, when the user selects a date in first datepicker, called Data de Partida (Arrival date), the second datepicker, called Data de chegada (Departure date), updates only it's start_date parameter, not the value inside the field that remais empty, in order to allow user selects the second date.

However, after the user selected the date and decides re-selects the first date to a future date, beyond the second date, i need the value of the second date changes to same date of the first date.

I'm looking for something like a getDate method to compare two dates and update the second date value when the selected first date is greater than second one, but I'm not have success. Can you help me?

Thanks in advance.

Filipe

chronoJQ("#date2").val(new_start_date.format_date(format));

Please try the code above!

Regards,
Max

Hi Max,
I already used thispiece of code on http://www.wscturismo.com form. What I need is a core datepicker getDate method to compare two dates.
Jquery has it's getDate method. Mootols has date.get('date'); method too.
Has Chronoforms datepicker it's own method to get date too?

Thanks.

Filipe Torres

Hi Filipe,

But the code in this topic will always update the 2nd start date whenever the first date changes, this is not enough ?

Regards,
Max

Hi Max,
unfortunately, it's not the desired behavior, because it defines a fixed interval between 2 dates.
I need a variable interval between 2 dates and update the second date value only if the first selected date is greater than second one, setting the second date equal to to first date.

I already finish JS code to make two dates behaves like that, but it takes me a lot of time comparing two date strings.
I wanna to use native datepicker, but the methods and documentation it's very limited. I hope that native datepicker be more mature in near future, otherwise I should to use Jquery Datepicker. Sorry for that, but it's true.

Thanks for your help.

Filipe Torres

What are the missing functions/features in the existing picker ? I can add them!

I still can't fully understand how the interval should be variable, you need the 2nd date to be always after the first one, the code posted in this topic earlier should update the 2nd date, you can remove/change the number of days added!

Regards,
Max

Hi Max,
missing functions/features? Well, this is the basic list:
1) getDate / setDate methods (get/set date from element in date format);
2) Translation/localization files;
3) setDefaults method, to define options like start_date, end_date etc, in JSON format;
4) parseDate method, to convert date format to other formats;
5) beforeShow, onChangeMonthYear, onClose functions;
The list goes on.

Sorry Max, but I don't understand why you decides develop your own datepicker when already exists so many done solutions for datepickers, like Jquery, Mootools, Bootstrap and so on.

Ok, I will explain the desired behavior again. The code posted earlier defines a fixed interval and this don't satisfy the conditions that I need:
1) Variable interval, not fixed.
2) The 2nd date must only changes if the 1st date is greater than 2nd.
3) Start date is today, ever.
That's it. Nothing more.

Removing the days added don't remove the fixed interval, just defines equal dates.
I asked for getDate method to compare 2 dates and test the second condition.

Thanks for your patience to help me, Max.

Filipe Torres

Hi Filipe,

#1- variable interval, its up to you to make the variable logic, my code example has a contact interval because this was the requirement in this topic, but you can change that!

#2- Please check my code below, you can use the "getTime" function to compare 2 dates:

var chronoJQ = jQuery;
function date_change(elem){
 var start_date = new Date();
 var format = elem.data("gdatetimepicker-format") ? elem.data("gdatetimepicker-format") : GDatetimepicker.format;
 var parsed_start_date = start_date.parse_date(elem.val(), format);
 start_date.setUTCFullYear(parsed_start_date.Y, parsed_start_date.m - 1, parsed_start_date.d);
//in the code above we have a date object contains the first field date, you can do the same for the 2nd field and compare using start_date.getTime()
}

#3- use use PHP in the "Extra params" box to set the start date to today!

Regards,
Max

Hi Max,
In your code above you could use start_date.getTime() because start_date variable is a date object type.
After user selects a date in the 2nd field, how to can I get it's date object?

Thanks,

Filipe Torres

Using the same method, you will need to run another function when the 2nd date field changes and follow the same steps!

Or get the 2nd field value and process it the same way, as is done by the end of my first code, I do this to set the 2nd field start date and value!

Regards,
Max

Hello, I need to know how to create a golf date range selection, as in the example: # date-range http://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#date-range

Can you help? I found no answer to this post.
Thanks!

Hi marcoria,

If the code example in the first page of this topic is not helpful then please start a new topic!

Regards,
Max