Change another field when Time picker field is changed

• zilveer

• March 31, 2017 at 10:46 pm

Hello,
I would like to achieve something which should be rather easy through JS, but I am unable to do that.

I have a JS file which is included, but it doesnt act as I do.

I have 2 time picker fields,
report_time_start (fieldname: field_5883db4f3d228)
report_time_end (fieldname: field_5883a4213ee6b)

When clicking in timepicker field (report_time_start) and selecting a time, I would like to add exactly the same time on report_time_end + 1 hour.

I have the following code:

// JavaScript Document
(function($) {
	$(document).ready(function(){
		if (typeof acf == 'undefined') { return; }
			$('#acf-field_5883db4f3d228').on('input', function() {
				// do something
				$('[data-name="report_time_end"] input.hasDatepicker').val( 'test' );
			});
	});
})(jQuery);

But nothing happens, can anyone please help me?

regards

• John Huebner

• April 3, 2017 at 1:20 am

There isn’t any documentation on how to update ACF fields in this manner. I have done some work with getting and setting values of ACF fields in JavaScript, but I have not worked with the date/time fields. With the date/time fields it’s not just a matter of setting a value, but also triggering the jQuery date picker to update correctly, or in some other way to make the change. I can tell you that the field that your targeting is only the displayed field. There is a hidden field that actually holds the value.

There may also be a problem with detecting that the first field is changed. Hidden fields to not trigger all of the same actions that other types of fields trigger. So your first step needs to be figuring out if your action firing at all. You can do this by logging something to the console to see if the action is getting triggered.

// JavaScript Document
(function($) {
	$(document).ready(function(){
		if (typeof acf == 'undefined') { return; }
			$('#acf-field_5883db4f3d228').on('input', function() {
				// do something
				console.log('do something');
				$('[data-name="report_time_end"] input.hasDatepicker').val( 'test' );
			});
	});
})(jQuery);