How to interact with a JavaScript script inside another file

Hello everyone,

I'm trying to give an extra use to a JS function that is originally included in a handler file that ame with a template. It handles the Date Range Picker JavaScript program. The function is included in the forms-plugins.js file, and has a var handleDateRangePicker that handles all the options for that script. It fills the dropdown with a standard range of dates, then opens a dropdown menu when the user clicks on it, the user selects a new range of dates and hit "Apply". The dropdown closes and the new range is displayed in the select field.

What I want is to interact with that (both the default range of dates and the new selected range of dates). The problem is that onChange event doesn't do the trick. If I include some "alert" code inside the plugins file, it works flawlessly but, how do I pass those variables to the php file so I can fiddle with them the way I want? Here's the shor version of the handler for that script in the forms-plugins.js file:

var handleDateRangePicker = function() {
	
	var today = new Date();
	var dd = today.getDate();
	var mm = today.getMonth() + 1; //January is 0!

	var yyyy = today.getFullYear();
	if (dd < 10) {
	  dd = '0' + dd;
	} 
	if (mm < 10) {
	  mm = '0' + mm;
	} 
	var today = dd + '/' + mm + '/' + yyyy;

	$('#advance-daterange span').html(moment().subtract('days', 29).format('DD/MM/YYYY') + ' - ' + moment().format('DD/MM/YYYY'));

	$('#advance-daterange').daterangepicker({
		format: 'DD/MM/YYYY',
		startDate: moment().subtract(29, 'days'),
		endDate: moment(),
		minDate: '01/01/2018',
		maxDate: today,
		dateLimit: { days: 60 },
		showDropdowns: true,
		showWeekNumbers: false,
		timePicker: false,
		timePickerIncrement: 1,
		timePicker12Hour: true,
		alwaysShowCalendars: true,
		opens: 'right',
		drops: 'down',
		buttonClasses: ['btn', 'btn-sm'],
		applyClass: 'btn-primary',
		cancelClass: 'btn-default',
		separator: ' hasta ',
		ranges: {
			'Hoy': [moment(), moment()],
			'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
			'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
			'Este Mes': [moment().startOf('month'), moment().endOf('month')],
			'Último Mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
		},
		locale: {
			format: "DD/MM/YYYY",
			separator: " - ",
			applyLabel: 'Aceptar',
			cancelLabel: 'Cancelar',
			fromLabel: 'Desde',
			toLabel: 'Hasta',
			customRangeLabel: 'Personalizado',
			daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi','Sa'],
			monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
			firstDay: 1
		}
	}, function(start, end, label) {
		$('#advance-daterange span').html(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'))
	});
};

var FormPlugins = function () {
	"use strict";
	return {
		//main function
		init: function () {
			// More handlers for other scripts
			handleDateRangePicker();
			// More handlers for other scripts
		}
	};
}();

Select allOpen in new window

And in the main PHP file, under document ready I have: FormPlugins.init();

What I would like is, for example, fetch the new range of dates so I can do a query in the DB, and also, after the results are delivered, set the custom selected range of dates (used to perform the query) into the advance-daterange span.

Just to be clear, I know I could simply move all that function to my PHP file's footer and do whatever I want there, but I like the idea of having everything separated and cleaner. Can this be done?

Thanks in advance!