Home › Forums › Add-ons › Options Page › DatePicker – Disable Dates insert into Js
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/
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
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
// 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);
}
}
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
📣 “ACF Chat Fridays”
— Advanced Custom Fields (@wp_acf) January 31, 2023
The ACF team holds their first open office hours this Friday! Come and talk ACF, and ask questions about building sites with the plugin.
We’d love to see you there!
📆 Friday 3rd Feb - 3pm UTC
👉 Register here - https://t.co/3UtvQbE4CU pic.twitter.com/oTwW9K1XQ0
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.