# Duplicating start date to end date

**URL:** <https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396>\
**Category:** Rails\
**Created:** [December 26, 2008, 5:45pm UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396 "2008-12-26T17:45:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bouldr-matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/85e7bf/32.png) [@bouldr-matt](https://www.ruby-forum.com/u/bouldr-matt)\
**Post date:** [December 26, 2008, 5:45pm UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396/1 "2008-12-26T17:45:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bouldr-matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/85e7bf/32.png) [@bouldr-matt](https://www.ruby-forum.com/u/bouldr-matt)\
**Post date:** [December 27, 2008, 5:27pm UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396/2 "2008-12-27T17:27:22Z")

</div>

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.](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.

---

<div class="post-metadata">

**Author:** ![bouldr-matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/85e7bf/32.png) [@bouldr-matt](https://www.ruby-forum.com/u/bouldr-matt)\
**Post date:** [December 28, 2008, 1:40am UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396/3 "2008-12-28T01:40:37Z")

</div>

Jeremy Weiskotten wrote:

> > Obviously this is client-side and will probably need some javascript but  
> > [1][http://code.google.com/p/calendardateselect/](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

---

<div class="post-metadata">

**Author:** ![bouldr-matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/85e7bf/32.png) [@bouldr-matt](https://www.ruby-forum.com/u/bouldr-matt)\
**Post date:** [December 28, 2008, 2:19am UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396/4 "2008-12-28T02:19:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bouldr-matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/85e7bf/32.png) [@bouldr-matt](https://www.ruby-forum.com/u/bouldr-matt)\
**Post date:** [December 28, 2008, 1:47am UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396/5 "2008-12-28T01:47:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bouldr-matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/85e7bf/32.png) [@bouldr-matt](https://www.ruby-forum.com/u/bouldr-matt)\
**Post date:** [December 28, 2008, 3:01am UTC](https://www.ruby-forum.com/t/duplicating-start-date-to-end-date/156396/6 "2008-12-28T03:01:53Z")

</div>

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 🙂

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