Jquery Date picker: select one date, automatically update the second field

Question

I am using the jQuery Date Picker plugin from Kelvin Luck ( http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ ) and you need to do the following: maybe someone can help me:

On the travel insurance website, I have two date fields, one for the start date and one for the end date. There is also a third field (selection) that selects plans, each with a different scope, over several days. The idea would be that if you choose a plan, for example, 15 days and an X start date, the second date field will be magically populated with X + 15 days.

The fact is that my knowledge of JavaScript is not what you would call advanced.

Does anyone have any experience with the plugin, or can you at least give me some pointers?

Thank you very much.

Answer 1

Maybe this will help

---

$(document).ready(function(){ $("#date2").datepicker(); $("#date1").datepicker({ onSelect: function(){ var fecha = $(this).datepicker('getDate'); $("#date2").datepicker("setDate", new Date(fecha.getTime())); $("#date2").datepicker("setDate", "+15d"); } }); }); 

I think this is what you need.

Answer 2

http://jqueryui.com/demos/datepicker/ onSelect may be what you are looking for, when you select the first date, you can add 15 days to it and fill in the second field

The datpicker you are using is an old version, I think you should look into the jquery datepicker from the link above

Answer 3

I modified one of the samples. something like that:

 $(function() { $('#start-date').bind( 'dpClosed', function(e, selectedDates) { var d = selectedDates[0]; if (d) { d = new Date(d); var timeframe = $('.plan-length').val(); $('#end-date').dpSetStartDate(d.addDays(timeframe).asString()); $('#end-date').dpSetEndDate( d.addDays(timeframe + 1).asString()); } } ); }); 

where #start-date is the input of the start date, .plan-length is the selector that will return the number of days the plan will be added (obviously, I don’t know your implementation, so this must change). and #end-date is the entry of the end date.

EDIT: I also highly recommend you check out the jQuery UI DatePicker plugin as it is much more flexible and IMO is easier to use.

EDIT 2: You can set a start and end date, so this is just one choice. I added 1 more line to the code above.