How to modify javascript in a page using more javascript?

As stated by Esailija there is no way to use DOM functions to manipulate javascript code, what you are needing is to implement variables that you modify after your ajax has successfully be called:

First off pull your ajax data objects out into variables:

/// pull your ajax data objects out into vars, best not to
/// pollute the global namespace though, as is done here,
/// if you can help it. I've kept things like this for simplicity.
var nextdata = {
  type: "GET",
  url: "/teams/change_date",
  dataType: 'json',
  data: {
    'id': '<%= @team.id %>',
    'date': '<%= @date - 1.day %>'
  }
};

var prevdata = {
  type: "GET",
  url: "/teams/change_date",
  dataType: 'json',
  data: {
    'id': '<%= @team.id %>',
    'date': '<%= @date + 1.day %>'
  }
};

Then create two new functions which will get called after your ajax calls have returned successfully.

/// these two functions are just examples to illustrate
/// they will alter the ajax data objects when required
/// that is as long as your change_date script returns json
/// containing a 'newdate' property in your expected format.
var nextcallback = function( resp ){
  nextdata.date = resp.newdate;
};

var prevcallback = function( resp ){
  prevdata.date = resp.newdate;
};

Then modify your original code as such:

$('#clipboardContainer').hide();
$( '#clipboard' ).click(function() {
  $("#clipboardContainer").toggle( "slide", 
    {direction: "up", mode: "hide"}, "slow" );
  $("#reportsContainer").toggle();
  if ($("#clipboard").html() == 'Open Clipboard') {
    $("#clipboard").html('Close Clipboard');
  }
  else {
    $("#clipboard").html("Open Clipboard");
  }
});
$('#prev').click(function() {
  $.ajax(prevdata).done(prevcallback);
});
$('#next').click(function() {
  $.ajax(nextdata).done(nextcallback);
});

global namespace

With regards to my comments about avoiding polluting global namespace, you should be wrapping your code, first in a "no conflict" anonymous wrapper, and second in a dom ready wrapper — like so:

;(function($){ /// <-- no conflict wrapper

  /// place your methods here

  $(function(){ /// <-- dom ready wrapper

    /// place your jQuery DOM manipulation here

  });

})(jQuery);

That way you keep your code segregated from interfering with anything else, you do need to be aware that your functions wont be accessible outside of these wrapper functions though — unless you've attached them as event listeners or exposed them in some other way globally.

Or as Ohgodwhy has accurately pointed out you could save yourself a function wrapper with:

jQuery(function($){ /// <-- dom ready + no conflict wrapper
  /// place your functions + jQuery here
});