Want to add javascript function on Date field

[pravin.agham]

Hi,

I have 2 field of dates one is From Date and another Is To date.
I want to add functionality on Form Date with JavaScript for increase the To Date value by 1 month from From Date Field.

For eg-
if I select From Date value 14 January then the To Date Field is changed to 15 February automatically.

I tried the JavaScript function to date field but it wont come in edit view page.

Please help me out!!!


Regards,
Pravin

[pravin.agham]

no one can help me!!

How to add JavaScript function to date field through custom code!! I triyed

  'displayParams' => 
            array (
              'javascript' => 'onchange="difference();"',
            ), 
  

but not working.


Regards,
Pravin.

[swilliams]

I was trying to execute some javascript when a date was picked and found this post when looking for an answer. So, here's what I did to get it to work.

I duplicated the Datetime Sugarfield so I could make a change and it would be upgrade safe.

Copy the contents of include/SugarFields/Datetime to a new folder.
Example include/SugarFields/Datetimecustom

Rename SugarFieldDatetime.php to SugarFieldDatetimecustom.php

Edit it and change the class name from SugarFieldDatetime to SugarFieldDatetimecustom and the last line:

return $this->fetch('include/SugarFields/Fields/Datetime/EditView.tpl');

to

return $this->fetch('include/SugarFields/Fields/Datetimecustom/EditView.tpl');

If you'll look at jssource/src_files/jscalendar/calendar-setup_3.js, you will see the available config parameters. The one I was interested in was onUpdate.

So, edit EditView.tpl and add the onUpdate parameter to the calendar setup and give it the function of your choosing.

Example:

<script type="text/javascript" language="javascript">
Calendar.setup ({ldelim}
inputField : "{{sugarvar key='name'}}",
daFormat : "{$CALENDAR_FORMAT}",
button : "{{sugarvar key='name'}}_trigger",
singleClick : true,
dateStr : "{$date_value}",
step : 1,
onUpdate : calUpdate
{rdelim}
);
</script>

Now you will need to define a javascript function called calUpdate and include it in the view.

And lastly, you will need to edit the editviewdefs.php and add a type def to point to the newly defined SugarField.

Example

array (
'name' => 'my_date',
'label' => 'LBL_MY_DATE',
'type' => 'Datetimecustom',
),

You will then need to do do a rebuild/repair to update the cache and then when a date is selected using the datepicker, it will call your javascript callback.

Hope this helps.

Steve

[pravin.agham]

Yes swilliams, I tried this and its works.

Thanks for replying.


Regards,
-Pravin

[mrpele]

I was trying to execute some javascript when a date was picked and found this post when looking for an answer. So, here's what I did to get it to work.

I duplicated the Datetime Sugarfield so I could make a change and it would be upgrade safe.

Copy the contents of include/SugarFields/Datetime to a new folder.
Example include/SugarFields/Datetimecustom

Rename SugarFieldDatetime.php to SugarFieldDatetimecustom.php

Edit it and change the class name from SugarFieldDatetime to SugarFieldDatetimecustom and the last line:

return $this->fetch('include/SugarFields/Fields/Datetime/EditView.tpl');

to

return $this->fetch('include/SugarFields/Fields/Datetimecustom/EditView.tpl');

If you'll look at jssource/src_files/jscalendar/calendar-setup_3.js, you will see the available config parameters. The one I was interested in was onUpdate.

So, edit EditView.tpl and add the onUpdate parameter to the calendar setup and give it the function of your choosing.

Example:

<script type="text/javascript" language="javascript">
Calendar.setup ({ldelim}
inputField : "{{sugarvar key='name'}}",
daFormat : "{$CALENDAR_FORMAT}",
button : "{{sugarvar key='name'}}_trigger",
singleClick : true,
dateStr : "{$date_value}",
step : 1,
onUpdate : calUpdate
{rdelim}
);
</script>

Now you will need to define a javascript function called calUpdate and include it in the view.

And lastly, you will need to edit the editviewdefs.php and add a type def to point to the newly defined SugarField.

Example

array (
'name' => 'my_date',
'label' => 'LBL_MY_DATE',
'type' => 'Datetimecustom',
),

You will then need to do do a rebuild/repair to update the cache and then when a date is selected using the datepicker, it will call your javascript callback.

Hope this helps.

Steve

Thanks Steve for this superb information.
Respect!

[kgrise]

I ran into this same issue and was able to fix it with this solution for editview, but what about quickcreate? I tried applying the same type to the quickcreatedefs.php and have the EditView.tpl file, etc in place. I get an error saying that it can't find my javascript function, but it is defined. Any thoughts?

[crewen]

i have the same problem with quickcreate. any help?

[rafael.q.g@hotmail.com]

For date fields sugar overwrite the onchage function that was set on onchange event.
For this cases you have to assign the function to the event after it is loaded on screen, like:

document.getElementById("field_id").onchange=funct ionName;

[madineclark2001]

I have the same problem and thank you for sharing

[kgrise]

Thank you Rafael for responding, but your answer doesn't fully apply. The change event (when placed inside $(document).ready) only works when you type into the date textbox and tab out. That will trigger the update I need for the other textbox, but the change event doesn't work when I choose a date from the calendar. It's basically ignored. I implemented what was suggested above and it works great for editview, but not for quickcreate. My question is really why the onUpdate inside my EditView.tpl can't find my javascript function?