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