Forum: Ruby on Rails duplicating start date to end date

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
8fa0f5c2bf8ad238baa4e20cb0360ebd?d=identicon&s=25 Matt Harrison (iwasinnamuknow)
on 2008-12-26 17:45
(Received via mailing list)
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/
5170ca260dbd2cdfd5a887a4dba7636f?d=identicon&s=25 Jeremy Weiskotten (jeremy_weiskotten)
on 2008-12-27 17:27
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.
8fa0f5c2bf8ad238baa4e20cb0360ebd?d=identicon&s=25 Matt Harrison (iwasinnamuknow)
on 2008-12-28 01:40
(Received via mailing list)
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 :)

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
5170ca260dbd2cdfd5a887a4dba7636f?d=identicon&s=25 Jeremy Weiskotten (jeremy_weiskotten)
on 2008-12-28 01:47
> 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 :)
>
> 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.
8fa0f5c2bf8ad238baa4e20cb0360ebd?d=identicon&s=25 Matt Harrison (iwasinnamuknow)
on 2008-12-28 02:19
(Received via mailing list)
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
8fa0f5c2bf8ad238baa4e20cb0360ebd?d=identicon&s=25 Matt Harrison (iwasinnamuknow)
on 2008-12-28 03:01
(Received via mailing list)
Matt Harrison 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 :)

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 topic is locked and can not be replied to.