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 Harrison 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();"

2. 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:

Matt Harrison 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();"

2. 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.

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:

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.

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

Matt Harrison wrote:

Jeremy Weiskotten wrote:

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.

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.

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