Duplicating start date to end date

Rails
1

One of my apps is using the calendar date select plugin[1] to let users
select the start and end date for an event.

The app is in beta and so far the users have asked if I can do this:

When the start date is selected, they want the end date to duplicate the
start. Then if it is a single day event, they can just leave the end
date, or if it is a multi-day event they can change it.

Obviously this is client-side and will probably need some javascript but
that isn’t my strong point and considering the relative complexity of
the calendar helper, I have no idea where to start.

Any advice on this gratefully received. If I haven’t explained this
clearly enough please let me know and I will try to clarify.

Thanks

Matt

[1]Google Code Archive - Long-term storage for Google Code Project Hosting.

2

Matt H. wrote:

One of my apps is using the calendar date select plugin[1] to let users
select the start and end date for an event.

The app is in beta and so far the users have asked if I can do this:

When the start date is selected, they want the end date to duplicate the
start. Then if it is a single day event, they can just leave the end
date, or if it is a multi-day event they can change it.

Obviously this is client-side and will probably need some javascript but
that isn’t my strong point and considering the relative complexity of
the calendar helper, I have no idea where to start.

Any advice on this gratefully received. If I haven’t explained this
clearly enough please let me know and I will try to clarify.

Thanks

Matt

[1]Google Code Archive - Long-term storage for Google Code Project Hosting.

The quick & dirty way is something like this…

  1. Add an onchange event handler to the start date field to call a JS
    function.

onchange=“copy_start_to_end();”

  1. Write the JS function, either in application.js or in your view.
    Something like this:

function copy_start_to_end() {
if ($F(‘end_date’).blank()) { // only copy start if end is blank
$(‘end_date’).value = $F(‘start_date’);
}
}

I haven’t tested it, but this should be pretty close. This assumes
you’re using Prototype JS.

3

Jeremy Weiskotten wrote:

Obviously this is client-side and will probably need some javascript but
[1]http://code.google.com/p/calendardateselect/
Something like this:

function copy_start_to_end() {
if ($F(‘end_date’).blank()) { // only copy start if end is blank
$(‘end_date’).value = $F(‘start_date’);
}
}

I haven’t tested it, but this should be pretty close. This assumes
you’re using Prototype JS.

Thanks for the reply,

Not being anything close to a JS coder, I had a little play but then
gave up to wait for people’s replies. I also posted this on the google
ML for the plugin and a kind soul led me to this:

observe_field the start date, and render the end date from a partial.
Whenever the start is modified, it calls the set_end_date action and
replaces the end date element based on the params from the start.

I know this isn’t the best way, and it does make an extra request when
it probably doesn’t need to, but it works :slight_smile:

I will keep playing with it while I read up on some JS and see if I can
make it more efficient using the method you’re talking about.

Thanks

Matt

4

Jeremy Weiskotten wrote:

I know this isn’t the best way, and it does make an extra request when
:function option so that you’re doing the work on the client and not
posting an Ajax request. It will be much more responsive.

Thats a very fair point, I knew that observe_field would be making more
work for the server. By the “:function option” do you mean the onchange
as you mentioned before?

I am keen to try this, however my understanding of JS lets me down I’m
sorry to say…mainly:

function copy_start_to_end() {
if ($F(‘end_date’).blank()) { // only copy start if end is blank
$(‘end_date’).value = $F(‘start_date’);
}
}

What does the $F var/function achieve? It appears to be shorthand for
specifying the form and element.

Thanks

Matt

5

Thanks for the reply,

Not being anything close to a JS coder, I had a little play but then
gave up to wait for people’s replies. I also posted this on the google
ML for the plugin and a kind soul led me to this:

observe_field the start date, and render the end date from a partial.
Whenever the start is modified, it calls the set_end_date action and
replaces the end date element based on the params from the start.

I know this isn’t the best way, and it does make an extra request when
it probably doesn’t need to, but it works :slight_smile:

I will keep playing with it while I read up on some JS and see if I can
make it more efficient using the method you’re talking about.

Thanks

Matt

You can use observe_field to get the same effect, but I would use the
:function option so that you’re doing the work on the client and not
posting an Ajax request. It will be much more responsive.

6

Matt H. wrote:

:function option so that you’re doing the work on the client and not
if ($F(‘end_date’).blank()) { // only copy start if end is blank
$(‘end_date’).value = $F(‘start_date’);
}
}

What does the $F var/function achieve? It appears to be shorthand for
specifying the form and element.

Nevermind, I have fiddled around and got it going :slight_smile:

I had a problem because my calendar inputs were named like the rest of
the form (taking[start] and taking[end]) and JS didn’t like that of
course as it thought i was referencing a hash or array. I’ve changed the
names of the calendars and made allowances in the controller.

I now have instant replication of the start date to the end date and it
isn’t wasting the servers time with an extra call.

Thanks for the help

Matt