Detect change in date field suitecrm

Question

I'm trying to detect when the date has changed inside a regular "date" field

Have seen a few forum posts about how this can be done with text fields and dropdown, but it doesn't work for date fields.

Also tried:

'displayParams' => array ( 'javascript' => 'onchange="checkStatusOption(this)"', ),

In the editviewdefs.php, but it didn't work (works for text fields though)

The closest I've got it actually just tracking every click on on the screen and then checking the before and after state of the date field, but it's obviously not a very elegant solution

Here's the code from the extended editview

    function display() {

        parent::display();

        $js = <<<EOT
<script type="text/javascript" language="JavaScript">

        // Capture initial state
        calendar_before = document.getElementById("contract_date_c").value;

       // Wait for any click to take place anywhere on the screen
        $(document).click(function() {

            // Capture state after we clicked somewhere
            calendar_after = document.getElementById("contract_date_c").value;

            // Compare the before and after
            if(calendar_before != calendar_after) {

                // Change detected
                alert("Something's changed eh?" + calendar_before +" "+ calendar_after);
            }

            // Set the new state of the before_calendar
            calendar_before = document.getElementById("contract_date_c").value;


        });

    }

</script>
EOT;

// now I output the javascript
        echo $js;

    }

UPDATE:

I also tried the suggested solution

1) Created a file custom/modules/un_inventory/contract_date_c_change.js and put the following inside:

function yourCustomFunction(formElement){
    console.log(formElement);
}

2) Included a reference to that file in the metadata file (made sure it loads it):

array (
    'file' => 'custom/modules/un_inventory/contract_date_c_change.js',
),

3) Attached the updateCallback to the field:

    array (
        'name' => 'contract_date_c',
        'label' => 'LBL_CONTRACT_DATE',
        // Checks if this field got filled up and shows hidden form field
        'displayParams' =>
            array (
                'updateCallback' => 'yourCustomFunction();',
            ),
    ),

But nothing happens when I change that date field

Answer 1

Check this out (just tested in SuiteCRM 7.11) for a datetime field, for other fields take a look at this answer to another SO question

First, include your custom JS in the editviewdefs.php (example for Accounts module)

'includes' => 
      array (
        0 => 
        array (
          'file' => 'modules/Accounts/Account.js',
          'file' => 'custom/modules/Accounts/myCustomFile.js',
        ),
      ),

Create the custom JS file custom/modules/Accounts/myCustomFile.js .

function yourCustomFunction(formElement){
  console.log(formElement); 
}

Then update the field you want to monitor for changes (contractsigned_c in the example) using the following code in the editviewdefs.php:

array (
            'name' => 'contractsigned_c',
            'label' => 'LBL_CONTRACTSIGNED',
            'displayParams' =>
             array (
              'updateCallback' => 'yourCustomFunction(this)',
          ),
          ),

Now do a Repair and Rebuild inside the Admin/Repair section and voilà it should work :)

You can add the JS function on the function display() if you want, its the samething, the function will be called right after native combo update. It will look like this combo_contractsigned_c.update(); yourCustomFunction(this)

Answer 2

use this . it is working

YAHOO.util.Event.addListener('your_field_name', 'change', function(){
// your code here
});