DatePicker – Disable Dates insert into Js

• bullsi

• June 13, 2018 at 5:03 am

Hi,

I want to use ACF Pro Custom Fields to allow the client to select a date range for when their park is closed. I created a repeater field called ‘Park Closed’ and a datepicker field called Start Date and End Date. Simple enough.

Whilst I have found some information how to insert ACF into JS files, I cant quite wrap my head around it!

<? wp_enqueue_script( ‘park-closed’, get_template_directory_uri() . ‘/assets/js/park-closed.js’, array(), $version, true ); ?>

<?
wp_localize_script( ‘park-closed’, ‘acf_vars’, array(
‘closed’ => get_field( ‘start-date’ )
‘closed’ => get_field( ‘end-date’ ),
)
);
?>

Then in JS

const start = acf_vars.closed.start-date;
const end = acf_vars.closed.end-date;

Then something else!?

These are the resources I have read to get this far. Any input / help much appreciated… This is my effort so far, I need to get this working for a client so happy to outsource this if its something someone is interested in.

Many thanks in advance, Damien

https://support.advancedcustomfields.com/forums/topic/use-the_field-in-a-javascript-file/
https://support.advancedcustomfields.com/forums/topic/passing-the_field-as-a-js-variable/
https://allisontarr.com/2017/09/15/function-wp_localize_script/
https://www.getsimple.com/blog/pass-php-data-to-javascript-in-wordpress-using-wp_localize_script/

• John Huebner

• June 13, 2018 at 10:40 pm

When localizing a script,
first you register it https://developer.wordpress.org/reference/functions/wp_register_script/,
then you localize it https://developer.wordpress.org/reference/functions/wp_localize_script/, then you enqueue it https://developer.wordpress.org/reference/functions/wp_enqueue_script/

This is covered in the user contributions on the second link above and better covered on this page https://codex.wordpress.org/Function_Reference/wp_localize_script

• poonasor

• October 29, 2020 at 11:55 am

Thanks John for sharing the resources..

How would I pass a repeater subfield data into the localize script?

Edit:
Solved my own question:
https://allisontarr.com/2017/09/15/function-wp_localize_script/

You dont need the .descriptor_list on acf_vars.list_parent

• John Huebner

• October 30, 2020 at 1:52 am

// PHP
// register a script
// see https://developer.wordpress.org/reference/functions/wp_register_script/
wp_register_script($handle, $src, $deps, $ver, $in_footer);

// build JS object
// here I am assuming I have a repeater with 2 sub fields
// Let's assume they are two date fields

// initialize my object as an array
// it will hold the rows of the repeager
$object = array();

if (have_rows('repeater')) {
  while (have_rows('repeater')) {
    the_row();
    // add row to array
    $object[] = array(
      'start_date' => get_sub_field('start_date'),
      'end_date' => get_sub_field('end_date')
    );
  }
}

// localize script
$object_name = 'my_js_object';
wp_localize_script($handle, $object_name, $object);

// enqueue the script
wp_enqueue_script($handle);

// JS File
if (my_js_object.length > 0) {
  for (i=0; $i<my_js_object.length; i++) {
    var row = my_js_object[i];
    // do something with the row
    console.log(row['start_date'];
    console.log(row['end_date'];

    // the above lines could also use this syntax
    console.log(row.start_date);
    console.log(row.end_date);
  }
}