Duplicating start date to end date

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]http://code.google.com/p/calendardateselect/

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]http://code.google.com/p/calendardateselect/

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.

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

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

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.

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

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs