Customizing the Date field using JQuery in Sage CRM

By | December 6, 2017

Working with Date field values on Client side scripts has always been quite difficult task. Moreover, JQuery has taken up the Sage CRM customization to the higher level as it has wide range of built in functions as well as its syntax to manipulate DOM elements reduces lines of code which is something every developer will like.

New Stuff: Sales site selection on Quote/Order for a Customer – GUMU for Sage CRM – Sage X3

Now, one of our customer walked in with the requirement that he needed to capture date values in the format of MMM – YYYY i.e. OCT – 2017 in order to capture Products Manufacturing and Expiry dates. How this can be done?

With little tweaking with JQuery it was possible to display dates in said format. Here is how this can be done.
1. Create one text field in CRM. i.e. oppo_expirydate
2. Create a JavaScript page (e.g. MonthYearPicker.js) with below jQuery Code and Copy it under “<installation path>”\WWWRoot\js\custom” folder.
crm.ready(function()
{
});
function AddMonthYearPicker(sFieldId)
{
$(“#”+sFieldId).datepicker({
dateFormat: ‘M yy’,
changeMonth: true,
changeYear: true,
showButtonPanel: false,
showOn: ‘button’,
buttonImage: ‘/’+crm.installName()+’/Themes/img/ergonomic/Buttons/calCalendar.gif’,
buttonImageOnly: true,
onChangeMonthYear: function() {
var month = $(“#ui-datepicker-div .ui-datepicker-month :selected”).val();
var year = $(“#ui-datepicker-div .ui-datepicker-year :selected”).val();
$(this).val($.datepicker.formatDate(‘M-yy’, new Date(year, month, 1)));
}
});
$(“#”+sFieldId).focus(function () {
$(“.ui-datepicker-calendar”).hide();
$(“#ui-datepicker-div”).position({
my: “center top”,
at: “center bottom”,
of: $(this)
});
});
}
3. After following above step. Go to screen and add below lines in Custom Content or call “AddMonthYearPicker” function with field id on Screen load.
<script>
crm.ready(function(){
AddMonthYearPicker(“oppo_expirydate”);
});
</script>
4. Once done, execute Metadata refresh and check.

Now, you can see that on clicking the Date picker icon in front of text fields show only the Month and Year values.
About Us
Greytrix a globally recognized Premier Sage Gold Development Partner is a one stop solution provider for Sage ERP and Sage CRM needs. Being recognized and rewarded for multi-man years of experience, we bring complete end-to-end assistance for your technical consultations, product customizations, data migration, system integrations, third party add-on development and implementation expertise.

Greytrix has some unique integration solutions for Sage CRM with Sage ERPs (Sage Enterprise Management (Sage X3), Sage Intacct, Sage 100Sage 500 and Sage 300).We also offer best-in-class Sage ERP and Sage CRM customization and development services to Business Partners, End Users and Sage PSG worldwide. Greytrix helps in migrating of Sage CRM from Salesforce | ACT! | SalesLogix | Goldmine | Sugar CRM | Maximizer. Our Sage CRM Product Suite includes Greytrix Business Manager, Sage CRM Project Manager, Sage CRM Resource Planner, Sage CRM Contract Manager, Sage CRM Event Manager, Sage CRM Budget Planner, Gmail Integration, Sage CRM Mobile Service Signature and Sage CRM CTI Framework.

Greytrix is a recognized Sage Rockstar ISV Partner for GUMU™ Sage Enterprise Management – Sage CRM integration also listed on Sage Marketplace.

For more information on our integration solutions, please contact us at sage@greytrix.com. We will be glad to assist you.